微信小程序中怎么自定義一個(gè)導(dǎo)航欄

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

具體內(nèi)容如下

在微信小程序中導(dǎo)航欄是可以直接配置的:

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

"window":{
 "navigationStyle": "custom"
},

 我就配置了這個(gè)屬性,現(xiàn)在來看看我的界面

紅色箭頭指向的是配置后自動生成的,我沒有寫任何代碼，比如我在更多界面導(dǎo)航欄需要自定義,那么在more.js中在onLoad()方法中獲取到全局存儲的導(dǎo)航欄高度,然后高度設(shè)置給組件就行了,

app.js:

 /**
 * 當(dāng)小程序初始化完成時(shí)，會觸發(fā) onLaunch（全局只觸發(fā)一次）
 */
 onLaunch: function () {
 wx.getSystemInfo({
  success: res => {
  //導(dǎo)航高度
 
  this.globalData.navHeight = res.statusBarHeight+46;
  this.navH = res.statusBarHeight;
  this.platform = res.platform;
  }
 })
 },
this.globalData.navHeight這個(gè)變量是在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
 },

默認(rèn)值是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;
}

以上就是微信小程序中怎么自定義一個(gè)導(dǎo)航欄，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。