微信小程序动态改变胶囊颜色

看别人的项目有这样一种设定，一进来没有导航栏只有返回按钮，胶囊颜色为黑色半透明，等滑动到一定高度以后导航栏出现，胶囊变成白色。
需要在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;
}

再调用监听页面滚动的方法就能动态显示隐藏导航栏。