关于javascript:小程序渐变色吸顶



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,
      })
    }
}

这样成果就根本实现了,心愿有用

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理