该效果需使用scroll-view组件

模板代码如下：

<template>
    <view>
        <view class="" style="position: absolute;z-index: 99999;" :style="{opacity: opacity }">
            <u-navbar title-color="#ffffff" back-text="返回" :border-bottom="false" :is-back="true" :background="background">
            </u-navbar>
        </view>
        <view class="">
            <scroll-view scroll-y scroll-with-animation="true" :style="'height:' + height + 'px;'" @scroll="scroll">
                <view class="bg-warning mt-2" style="height: 200px;width: 100%;" v-for="(item,index) in 30">
                    
                </view>
            </scroll-view>
        </view>
    </view>
</template>

模板代码如下： js部分

<script>
    export default {
        data() {
            return {
                background:{backgroundColor:'#fd5365'},
                height:0,
                navbarRight:0,
                opacity: 0,
                scrollY: 0,
            }
        },
        onLoad(e) {
            console.log(uni.getMenuButtonBoundingClientRect())
            let res =uni.getSystemInfoSync()
            this.height = res.windowHeight;
            this.navbarRight = res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
        },
        methods:{
            scroll: function(e) {
                var that = this,
                    scrollY = e.detail.scrollTop;
                var opacity = scrollY / 200;
                opacity = opacity > 1 ? 1 : opacity;
                that.$set(that, 'opacity', opacity);
                that.$set(that, 'scrollY', scrollY);
                if (that.lock) {
                    that.$set(that, 'lock', false);
                    return;
                }
            },
        }
    }
</script>

使用scroll监听页面滑动，通过计算动态修改透明度