小程序導航條自定義，高度自適應iphoneX等劉海手機和其他手機，開啟導航自定義需要在app.json文件里將window的 navigationStyle屬性設置為: custom，開啟導航自定義可以豐富其樣式，下面是代碼~

//該文件是app.json,開啟后默認就沒有導航了 "window": { "navigationStyle": "custom" }

沒有導航只有我們我要新建一個，我們把它作為組件，這樣小程序的其他頁面就都可以引入了，新建一個 Title 的組件，但是這個組件的高度我們要根據不同的手機去適配，如果是iphoneX，一般劉海手機是88px，其他是64px，但沒有標準，主要還是看手機型號，微信提供一個可以獲取的導航條加狀態欄高度的接口 wx.getSystemInfo

//在app.js 的onLaunch 方法里面 wx.getSystemInfo({ success:e=>{ this.globalData.statusBar = e.statusBarHeight; let custom = wx.getMenuButtonBoundingClientRect(); this.globalData.custom=custom; this.globalData.customBar=custom.bottom+custom.top-e.statusBarHeight; } })//e.statusBarHeight 這是狀態欄高度，一般手機為 20px ,iphoneX 為44px,我們就是根據這個來設置導航的高度//在Title的組件中const app = getApp()Component({ /** * 組件的初始數據 */ data: { full:false, statusBar:app.globalData.statusBar, customBar:app.globalData.customBar }})

組件的 wxml 文件

我是標題

組件的css文件

/*這是組件的樣式*/.title{ width:100%; box-sizing: border-box; background: #fff; position:fixed; top:0; left:0; z-index: 9999;}.con{ width:100%; display: flex; position:relative;}.title .left{ position:absolute; left:0; top:0; width:70rpx; height:100%; display:flex; justify-content: center; align-items: center;}.title .left image{ width:50rpx; height:50rpx;}.title .right{ flex:0 0 calc(100% - 140rpx); width:calc(100% - 140rpx); margin:0 auto; color:#000; font-weight:bold; display: flex; align-items: center; justify-content: center; padding-right:calc(100%-140rpx); font-size:38rpx; letter-spacing: 2rpx; pointer-events: none; text-overflow: ellipsis; white-space:normal; overflow:hidden;}

其他手機的效果圖

iphoneX手機效果圖

我們把這個組件強化一下，讓他可以進行組件傳值

組件的js文件

//把這個放在組件的 properties的字段里面 properties: { title:{ type:String //這個是標題 }, isBack:{ //這個是 是否顯示返回按鈕，如果不傳值就默認顯示 type:Boolean, value:true }},

組件的 wxml 文件

{{title}}

調用方式

先在調用的頁面聲明該組件

組件的json文件

{ "usingComponents": { "Title": "../../components/Title/Title

總結

以上是生活随笔為你收集整理的swiper高度自适应_小程序自定义导航自适应高度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。