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