小程序顶部标题栏随滑动时的渐变隐藏和渐变显示效果

先看效果

 

思路：

通过监听小程序的监听用户滑动页面事件 ，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
    })
  },

 

 

 完成、