小程序 顶部栏标题栏 下拉滚动 渐显白色背景

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/3164fd0e6d6848efaa1e87e02c35179e.png

下拉 100px 后 变成渐变成白色

显示原理

<wd-navbar fixed safeAreaInsetTop :bordered="false":custom-style="'background-color: rgba(255, 255, 255, '+opacityVal+') !important'"><template #left><image @click="gobackFn" src="/static/img/back-2.png" style="width: 42rpx;height: 42rpx;" mode=""></image></template></wd-navbar>

这个主要就是’background-color: rgba(255, 255, 255, ‘+opacityVal+’) !important’
监听页面下拉事件

import {onPageScroll
} from '@dcloudio/uni-app'let opacityVal = ref(0)let scrollThreshold = ref(100)// 监听页面滚动
onPageScroll((e) => {const scrollTop = e.scrollTop;opacityVal.value = calcOpacity(scrollTop)
})// navbar 透明度 变化let calcOpacity = (scrollTop) => {if (scrollTop <= 0) return 0; // 滚动到顶部时透明度为0if (scrollTop >= scrollThreshold.value) return 1; // 超过阈值时透明度为1return (scrollTop / scrollThreshold.value).toFixed(1); // 线性计算透明度}

pages中 当前的页面 取消顶部标题栏 就可以自定义标题栏
“style” :
{
“navigationStyle”: “custom”
}