當(dāng)我發(fā)現(xiàn)微信小程序有這個(gè)效果的時(shí)候 我的內(nèi)心是這兩個(gè)字：臥 倒 草 地，（對(duì)，兩個(gè)字）

效果就是如圖所示：

2019-11-23 202108.gif

我的思路是 監(jiān)聽頁面滾動(dòng)，超過一定高度，改變顏色。甚至還可以改標(biāo)題的文案。其實(shí)就是滾動(dòng) 結(jié)合 修改 標(biāo)題的api實(shí)現(xiàn)

核心js代碼如下

page({
  ...
  ...

  /**
   * 監(jiān)聽用戶滑動(dòng)頁面事件--返回頁面在垂直方向已滾動(dòng)的距離（單位px）
   */
  onPageScroll(e){
//      console.log(e.scrollTop);
      if(e.scrollTop>50){   //這里的滾動(dòng)數(shù)值，就看具體需求了
          wx.setNavigationBarTitle({
              title:"hi～"
          })
          wx.setNavigationBarColor({
                frontColor: '#ffffff', // 必寫項(xiàng)

                backgroundColor:"#0e0e0e", // 傳遞的顏色值

                animation: { // 可選項(xiàng) 這里實(shí)現(xiàn) 過度效果 太好了

                duration: 400,

                timingFunc: 'easeIn'

                }
          })

          
      }else{
           wx.setNavigationBarTitle({
              title:"當(dāng)下"
          })
           wx.setNavigationBarColor({
                frontColor: '#ffffff', // 必寫項(xiàng)

                backgroundColor:"#3a3a3a", // 傳遞的顏色值

                animation: { // 可選項(xiàng)

                duration: 400,

                timingFunc: 'easeIn'

                }
          })


      }

   
    
  }

})