小程序渐变色吸顶

  • Z时代
  • 2024-01-10
  • 分类：综合



UI给了新需求，顶部使用custom导航，并根据用户滑动颜色渐深
直接上代码
wxml：

<view class="sticky-bg" style="width:100%;height:{{MenuButtonLocation.top}}px;position: sticky;top:0rpx;z-index:999;background: rgba(255, 255, 255, {{opacity}});" />

js:

onLoad() function(options) {
    // 获取导航栏胶囊信息，具体参数参考微信文档
    // https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html
    this.setData({
          MenuButtonLocation:wx.getMenuButtonBoundingClientRect()
    })
},
onPageScroll: function(e) {
    let opacity = this.data.opacity
    // 我的高度是250的时候渐变为纯色，具体数值看业务需求
    if(e.scrollTop <= 250){
      opacity = e.scrollTop / 250
    }else{
      opacity = 1
    }
    // 这里为了防止opacity==1的时候频繁交互
    if(this.data.opacity !== opacity){
      this.setData({
        opacity,
      })
    }
}

这样效果就基本实现了，希望有用

以上是 小程序渐变色吸顶 的全部内容， 来源链接： utcz.com/z/267841.html

回到顶部