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

5次阅读

共计 664 个字符，预计需要花费 2 分钟才能阅读完成。

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

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

正文完