小程序頂部標題欄隨滑動時的漸變隱藏和漸變顯示效果

先看效果

 

思路：

通過監聽小程序的監聽用戶滑動頁面事件 ，onPageScroll ，在用戶滑動頁面時，判斷距離頂部的高度來決定頂部tabs的顯隱以及透明度。

 

代碼：

wxml

<van-tabs sticky class="tabs" style="display: {{ opacity > .3 ? 'block' : 'none'}};opacity:{{ opacity }}"
  bind:click="scrollTo">
  <van-tab title="商品" name="product"></van-tab>
  <van-tab title="評價" name="rate"></van-tab>
  <van-tab title="詳情" name="detail"></van-tab>
  <van-tab title="推薦" name="other"></van-tab>
</van-tabs>

wxss

.tabs {
  position: fixed;
  z-index: 1;
}

js

  /**
   * 監聽用戶滑動頁面事件 計算頂部tabs透明度
   */
  onPageScroll(e) {
    let value = e.scrollTop / 100;
    value > 1 && (value = 1);
    this.setData({
      opacity: value
    })
  },

 

 

 完成、