看别人的项目有这样一种设定，一进来没有导航栏只有返回按钮，胶囊颜色为黑色半透明，等滑动到一定高度以后导航栏出现，胶囊变成白色。
需要在js里面用到 wx.setNavigationBarColor，它有两个参数一起设定可以改变胶囊颜色，需要注意颜色要用十六进制
- 当胶囊为黑色半透明
wx.setNavigationBarColor({
backgroundColor:'#ffffff',
frontColor:'#ffffff',
})
- 当胶囊为白色
wx.setNavigationBarColor({
backgroundColor:'#000000',
frontColor:'#000000',
})
如果是指定页面胶囊颜色，之后不做改变，可以直接在json文件里面配置：
- 胶囊为白色
{
"navigationBarTextStyle": "black",
}
- 胶囊为黑色半透明
{
"navigationBarTextStyle": "white",
}
附带监听页面滚动，滑动到某一节点位置时改变胶囊颜色的方法：
onPageScroll(e){
let query = wx.createSelectorQuery()
let that = this
query.select('.d-content').boundingClientRect(function(rect){
// 滑动到此节点高度值+100的位置显示导航栏，胶囊为白色
if(e.scrollTop > rect.top + 100){
that.setData({
showNav: true
})
wx.setNavigationBarColor({
backgroundColor:'#000000',
frontColor:'#000000',
})
}else{
// 否则隐藏导航栏，胶囊为黑色半透明
that.setData({
showNav: false
})
wx.setNavigationBarColor({
backgroundColor:'#ffffff',
frontColor:'#ffffff',
})
}
}).exec()
},
我用的是自定义导航栏，需要在json里面配置一下：
{
"navigationStyle": "custom"
}
在app.js里面设置全局变量navHeight，动态计算导航栏高度：
globalData: {
userInfo: null,
navHeight: 0
}
onLaunch里面：
wx.getSystemInfo({
success: res => {
//导航高度
this.globalData.navHeight = res.statusBarHeight + 46;
}, fail(err) {
console.log(err);
}
})
需要自定义导航栏页面的wxml文件：
<view class='nav bg-white' wx:if="{{showNav}}" style='height:{{navH}}px'>
<view class='nav-title'>
<text class="iconfont icon-fanhui"></text>
{{navTitle}}
</view>
</view>
js文件:
const App = getApp();
Page({
data: {
navH:0,
showNav:false,
},
onLoad: function (options) {
this.setData({
navH: App.globalData.navHeight
})
wx.setNavigationBarColor({
backgroundColor:'#ffffff',
frontColor:'#ffffff',
})
},
})
wxss文件:
.nav{
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.nav-title{
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
font-family:PingFang-SC-Medium;
font-size:36rpx;
letter-spacing:2px;
}
.bg-white{
background: white;
}
.icon-fanhui{
position: absolute;
left: 30rpx;
}
再调用监听页面滚动的方法就能动态显示隐藏导航栏。
