小程序仿App滚动页面 改变标题颜色

当我发现微信小程序有这个效果的时候 我的内心是这两个字：卧 倒 草 地，（对，两个字）

效果就是如图所示：

2019-11-23 202108.gif

我的思路是 监听页面滚动，超过一定高度，改变颜色。甚至还可以改标题的文案。其实就是滚动 结合 修改 标题的api实现

核心js代码如下

page({
  ...
  ...

  /**
   * 监听用户滑动页面事件--返回页面在垂直方向已滚动的距离（单位px）
   */
  onPageScroll(e){
//      console.log(e.scrollTop);
      if(e.scrollTop>50){   //这里的滚动数值，就看具体需求了
          wx.setNavigationBarTitle({
              title:"hi～"
          })
          wx.setNavigationBarColor({
                frontColor: '#ffffff', // 必写项

                backgroundColor:"#0e0e0e", // 传递的颜色值

                animation: { // 可选项 这里实现 过度效果 太好了

                duration: 400,

                timingFunc: 'easeIn'

                }
          })

          
      }else{
           wx.setNavigationBarTitle({
              title:"当下"
          })
           wx.setNavigationBarColor({
                frontColor: '#ffffff', // 必写项

                backgroundColor:"#3a3a3a", // 传递的颜色值

                animation: { // 可选项

                duration: 400,

                timingFunc: 'easeIn'

                }
          })


      }

   
    
  }

})