⼩程序⾃定义导航栏
本⽂实例为⼤家分享了⼩程序⾃定义导航栏，供⼤家参考，具体内容如下
在⼩程序中导航栏是可以直接配置的:
⽬前只⽀持⼆种，但是我们的需求可能需要⼀个其他的颜⾊等，那么不得不修改这个了,
"window":{
"navigationStyle": "custom"
},
我就配置了这个属性，现在来看看我的界⾯
红⾊箭头指向的是配置后⾃动⽣成的，我没有写任何代码，⽐如我在更多界⾯导航栏需要⾃定义，那么在more.js中在onLoad()⽅法中获取到全局存储的导航栏⾼度，然后⾼度设置给组件就⾏了,
app.js:
/**
* 当⼩程序初始化完成时，会触发 onLaunch（全局只触发⼀次）
*/
onLaunch: function () {
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: "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;
}
效果图：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
>js导航栏下拉菜单