小程序?qū)Ш綏l自定義，高度自適應(yīng)iphoneX等劉海手機(jī)和其他手機(jī)，開啟導(dǎo)航自定義需要在app.json文件里將window的 navigationStyle屬性設(shè)置為: custom，開啟導(dǎo)航自定義可以豐富其樣式，下面是代碼~

//該文件是app.json,開啟后默認(rèn)就沒有導(dǎo)航了 "window": { "navigationStyle": "custom" }

沒有導(dǎo)航只有我們我要新建一個(gè)，我們把它作為組件，這樣小程序的其他頁面就都可以引入了，新建一個(gè) Title 的組件，但是這個(gè)組件的高度我們要根據(jù)不同的手機(jī)去適配，如果是iphoneX，一般劉海手機(jī)是88px，其他是64px，但沒有標(biāo)準(zhǔn)，主要還是看手機(jī)型號(hào)，微信提供一個(gè)可以獲取的導(dǎo)航條加狀態(tài)欄高度的接口 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 這是狀態(tài)欄高度，一般手機(jī)為 20px ,iphoneX 為44px,我們就是根據(jù)這個(gè)來設(shè)置導(dǎo)航的高度//在Title的組件中const app = getApp()Component({ /** * 組件的初始數(shù)據(jù) */ data: { full:false, statusBar:app.globalData.statusBar, customBar:app.globalData.customBar }})

組件的 wxml 文件

我是標(biāo)題

組件的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;}

其他手機(jī)的效果圖

iphoneX手機(jī)效果圖

我們把這個(gè)組件強(qiáng)化一下，讓他可以進(jìn)行組件傳值

組件的js文件

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

組件的 wxml 文件

{{title}}

調(diào)用方式

先在調(diào)用的頁面聲明該組件

組件的json文件

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。