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

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

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

　　　　

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

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

　　　　

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

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

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

測試機(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。每個設(shè)備都一致},// 監(jiān)聽頁面滾動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é)

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

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