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,
})
}
}
这样成果就根本实现了,心愿有用
发表回复