微信小程序中怎么自定義一個導航欄

本篇文章給大家分享的是有關微信小程序中怎么自定義一個導航欄，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

具體內容如下

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

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

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

以上就是微信小程序中怎么自定義一個導航欄，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。