本文實例為大家分享了微信小程序自定義導航欄，供大家參考，具體內容如下
在微信小程序中導航欄是可以直接配置的:
目前只支持二種，但是我們的需求可能需要一個其他的顏色等,那么不得不修改這個了,
"window":{ "navigationStyle": "custom"},我就配置了這個屬性,現在來看看我的界面
紅色箭頭指向的是配置后自動生成的,我沒有寫任何代碼，比如我在更多界面導航欄需要自定義,那么在more.js中在onLoad()方法中獲取到全局存儲的導航欄高度,然后高度設置給組件就行了,
app.js:
/** * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次） */ onLaunch: function () { wx.getSystemInfo({ success: res => { //導航高度 this.globalData.navHeight = res.statusBarHeight+46; this.navH = res.statusBarHeight; this.platform = res.platform; } }) },this.globalData.navHeight這個變量是在app.js中定義的： globalData: { isPlayMusic :false, doubanBase: "http://t.yushu.im", navHeight:0 },然后在more.js中獲取
onLoad: function (options) { this.setData({ navH: App.globalData.navHeight }) },要獲取全局的變量要使用：
var App = getApp();
獲取到全局對象 this.setData({})是更新data:{}中定義的變量
data: { navH:0 },默認值是0
more.wxml:
<view> <view class='more_main' style='height:{{navH}}px'> <view class='title_contanier'> <text class="more_title">更多</text> </view> </view></view>more.wxss
.more_title{ margin:0 auto; margin-top: 75rpx; text-align:center; font-size: 32rpx; }.title_contanier{ display: flex; flex-direction: row;}.more_main{ width: 100%; background-color: greenyellow;}效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
