微信小程序自定義導航欄

2020-03-21 16:03:43

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了微信小程序自定義導航欄，供大家參考，具體內容如下

在微信小程序中導航欄是可以直接配置的:

微信小程序,導航欄

目前只支持二種，但是我們的需求可能需要一個其他的顏色等,那么不得不修改這個了,

"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;}

效果圖：

微信小程序,導航欄