微信小程序可以設(shè)置自定義標(biāo)題欄，可以針對(duì)不同頁(yè)面單獨(dú)設(shè)置
1.?在頁(yè)面文件?.json?文件中，設(shè)置如下屬性，自定義導(dǎo)航欄?和?導(dǎo)航欄樣式"navigationStyle":?"custom","navigationBarTextStyle":?"white",
　　特別是第二個(gè)?navigationBarTextStyle?屬性?可以將膠囊樣式調(diào)整為透明效果

2.?設(shè)置自定義導(dǎo)航欄布局?樣式?動(dòng)效邏輯等

3.?劃重點(diǎn)！！！導(dǎo)航欄中狀態(tài)欄高度?導(dǎo)航欄高度?膠囊高度，需要得知這三個(gè)屬性進(jìn)行布局?+?兼容
　　這里的尺寸都是?px?為單位的！
　　3.1?狀態(tài)欄高度
　　　　狀態(tài)欄指的是?顯示手機(jī)的時(shí)間?電量?信號(hào)等信息的一塊區(qū)域。參考如下圖

　　　　

　　市場(chǎng)上使用的手機(jī)狀態(tài)欄高度有多種，如劉海屏?全面屏?iOS特殊型號(hào)?和?安卓其他型號(hào)。
　　獲取狀態(tài)欄高度的方法：調(diào)用微信?wx.getSystemInfoSync()?API獲取狀態(tài)欄高度

　　3.2?導(dǎo)航欄高度
　　　　膠囊和功能按鈕顯示的區(qū)域。參考如下圖片

　　　　

　　　　導(dǎo)航欄高度獲取方法：安卓48px?iOS?40px?這個(gè)是固定的。真機(jī)環(huán)境下，編輯器有誤差

　　3.3?膠囊高度
　　　　各種機(jī)型測(cè)試的結(jié)果下都是?32px

　4.?滾動(dòng)頁(yè)面?改變標(biāo)題欄不透明度
　　　此處建議使用?pages?的一個(gè)監(jiān)聽(tīng)事件?onPageScroll?監(jiān)聽(tīng)頁(yè)面滾動(dòng)。設(shè)置標(biāo)題欄背景的不透明度?rgba
　　　這個(gè)需要注意的是合理使用?setData?不能每次滾動(dòng)都設(shè)置數(shù)據(jù)，不然可能導(dǎo)致頁(yè)面卡頓等影響

測(cè)試機(jī)型：
Andorid:?小米6?小米mix3?oppoR9s
iPhone:?7P?x?xs?xr

相關(guān)代碼：

// 設(shè)置導(dǎo)航欄高度setNavigation() {// 獲取設(shè)備系統(tǒng)信息，單位pxconst systemInfo = wx.getSystemInfoSync()// 狀態(tài)欄高度const statusBarHeight = systemInfo.statusBarHeight// iOS真機(jī) 膠囊區(qū)高度 40let navigationHeight = 40// 膠囊區(qū)域高度，安卓48if (systemInfo.system.indexOf('Android') !== -1) {navigationHeight = 48}// 設(shè)置this.setData({statusBarHeight: statusBarHeight,navigationHeight: navigationHeight,systemWidth: systemInfo.screenWidth})// 右上角膠囊，高度32px。每個(gè)設(shè)備都一致},// 監(jiān)聽(tīng)頁(yè)面滾動(dòng)onPageScroll: function(e) {// 只在規(guī)定區(qū)域setDataif (e.scrollTop < this.data.systemWidth) {const opacity = (e.scrollTop * 2) / this.data.systemWidthif (opacity >= 1) {if (this.data.statusBarOpacity !== 1) {this.setData({statusBarOpacity: opacity})}} else {this.setData({statusBarOpacity: opacity})}}}

總結(jié)

以上是生活随笔為你收集整理的微信小程序 自定义标题栏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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