需求:
进入页面时,没有导航栏,随着页面向上滚动,滚动条透明度逐渐变清晰,最后全部展示出来。
随着页面向下滚动,导航栏再逐渐消失
思路:
一个fixed定位的导航栏组件,外部传入opacity来控制css属性来控制透明度。
页面使用时,在onPageScroll里用throttle防抖方法在滚动时改变opacity
核心代码:
// gradient-bar.js
const {
SDKVersion, version, statusBarHeight } = wx.getSystemInfoSync();
Component({
properties: {
opacity: Number, // 透明度
title: String, // 导航标题
showBackBtn: {
type: Boolean,
value: false
}</