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

2.?設置自定義導航欄布局?樣式?動效邏輯等

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

　　　　

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

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

　　　　

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

　　3.3?膠囊高度
　　　　各種機型測試的結果下都是?32px

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

測試機型：
Andorid:?小米6?小米mix3?oppoR9s
iPhone:?7P?x?xs?xr

相關代碼：

// 設置導航欄高度setNavigation() {// 獲取設備系統(tǒng)信息，單位pxconst systemInfo = wx.getSystemInfoSync()// 狀態(tài)欄高度const statusBarHeight = systemInfo.statusBarHeight// iOS真機 膠囊區(qū)高度 40let navigationHeight = 40// 膠囊區(qū)域高度，安卓48if (systemInfo.system.indexOf('Android') !== -1) {navigationHeight = 48}// 設置this.setData({statusBarHeight: statusBarHeight,navigationHeight: navigationHeight,systemWidth: systemInfo.screenWidth})// 右上角膠囊，高度32px。每個設備都一致},// 監(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})}}}

總結

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

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