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

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