uniapp开发微信小程序 nav-bar滑动变色

nav-bar从透明底色变成白色底色

<u-navbar :safeAreaInsetTop="true" :bgColor="bcg" ref="navbar">
                <view class="u-nav-slot" slot="left">

//这里写navbar里面的代码
                </view>
            </u-navbar>

注意在data中声明：                bcg: "transparent",（默认为透明色的）

下面是监听滑动事件 滑动到你所设置的高度后 把背景颜色变成白色底色

onPageScroll(e) {
                this.onScroll(e)
            },

onScroll(e) {
                const scrollTop = e.scrollTop
                const threshold = 100
                const navBar = uni.createSelectorQuery().select('.nav-bar')
                if (scrollTop > threshold) {
                    this.bcg = '#ffffff'
                } else {
                    this.bcg = 'transparent'
                }
            },