#如圖一所示，我們在導航欄中加了個文案和搜索框第一步我們需要在app.json->window設置，還可配置更多的選項 ：

{"navigationStyle": "custom","backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"}

第二步獲取導航和狀態欄的高度，下面的代碼(在app.js中)其實我們也只是用到了globalData.navHeight，這個用來設置導航的高度，通過style='height:{{navHeight }}px;'來設置外部容器的高度

?

#因為我們項目的自定義導航變化比較多就不展示詳細的代碼，主要就是上面兩步，其他的就是寫wxml和wxss來定義導航的樣式了

let menuButtonObject = wx.getMenuButtonBoundingClientRect(); let that = this; wx.getSystemInfo({// 獲取頁面的有關信息success: function (res) {wx.setStorageSync('systemInfo', res)let statusBarHeight = res.statusBarHeight;let navTop = menuButtonObject.top;//膠囊按鈕與頂部的距離that.globalData.navHeight = menuButtonObject.height + statusBarHeight + 10;that.globalData.mgTOP = statusBarHeight + menuButtonObject.height + 10;that.globalData.navTop = navTop;that.globalData.menuButtonObject = menuButtonObject;that.globalData.statusBar = res;}});

#圖一

?

?

總結

以上是生活随笔為你收集整理的小程序开发(6)-之自定义导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

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