一、实现效果

• 底部banner， 自动轮播 + 手动轮播
• 滚动时，banner背景虚化

二、问题

知识点

布局

<template>
    <scroll-view
        class="content"
        scroll-y="true"
        @scroll="handleScroll"
    >
        <!-- banner -->
        <swiper
            class="swiper"
            :class="isFade ? 'fade' : ''"
        >
            <swiper-item v-for="item in background" :key="item"/>
        </swiper>
        <!-- 内容 -->
        <view class="main-wrapper">
            <!-- 占位 -->
            <view class="fade-wrapper"/>
            <!-- 列表 -->
            <view class="list"/>
        </view>
    </scroll-view>
</template>

.content {
    height: calc(100vh - var(--window-bottom));
    
    .swiper { // 放到scroll-view内，保证可手动滑动
        width: 100%;
        height: 100%;
        position: fixed; // 保证背景位置不变
        
        .swiper-item {
            width: 100%;
            height: 100vw;
            &.fade {
                filter: blur(15px); // 背景虚化
            }
        }
    }
    
    .main-wrapper {
        .list {
            display: flex;
            position: relative; //！
        }
        .fade-wrapper {
            height: 520rpx; // 站位元素
        }
    }
}

滚动占位

.fade-wrapper {
    height: 520rpx; // 站位元素
}

在scroll-view内，占滚动条位置

虚化

.fade {
    filter: blur(15px); // 背景虚化
}