文章图片
文章图片
UI给了新需求，顶部使用custom导航，并根据用户滑动颜色渐深
直接上代码
wxml：
【小程序渐变色吸顶】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,
})
}
}
这样效果就基本实现了，希望有用
