![在這里插入圖片描述](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”
}