uni-app 通过 swiper 实现卡片滑动背景同步切换效果

朱雀 2021-03-30 11:06 1576阅读 0赞

我们在开发旅游专题前端时，经常会遇到需要实现飞猪或携程里面的卡片滑动背景同步切换效果。`uni-app` 通过 `swiper` 组件也可以实现类似效果， 如下图：

![](/images/20210330/1617102410297.jpg)

具体实现方式如下：

**HTML 代码：**

```html
<view class="swiper-box">
    <image class="swiper-bg" :src="cardList[selectedCardIndex]" mode="aspectFill"></image>
    <swiper class="swiper"
        :previous-margin="cardList.length === 1 ? '20%' : selectedCardIndex === 0 ? '10%' : selectedCardIndex === cardList.length -1 ? '30%' : '20%'"
        :next-margin="cardList.length === 1 ? '20%' : selectedCardIndex === cardList.length -1 ? '10%' : selectedCardIndex === 0 ? '30%' : '20%'"
        @change="swiperChange">
        <swiper-item v-for="(swiperItem,swiperIndex) in cardList" :key="swiperIndex" style="position: relative;">
            <image :src='swiperItem' :class="{'swiper-active':selectedCardIndex == swiperIndex}"></image>
        </swiper-item>
    </swiper> 
</view>
```

**SCSS 代码：**

```css
page {
    background-color: #FAFAFA;
}
.swiper-box {
    .swiper-bg {
        width: 100%;
        position: absolute;
        height: 500rpx;
        &::after { // 背景图从上往下渐变效果，慢慢渐变到网页背景色
            content: '';
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: linear-gradient(to bottom ,transparent, #FAFAFA);
        }
    }
    .swiper {
        padding-top: 64rpx;
        height: 728rpx; // 考虑到卡片对应图片大小以及手机分辨率不同，大家可以根据实际情况设置
        image {
            width: 100%;
            height: 100%;
            transform: scale(0.78); // 通过缩放实现待选卡片缩小效果
            transition: transform 0.3s ease-in-out 0s;
            border-radius: 26rpx;
            box-shadow: 0px 2rpx 12rpx rgba(0, 0, 0, 0.1);
            &.swiper-active {
                transform: scale(1);
            }
        }
    }
}
```

**JS 代码：**

```javascript
export default {
    data() {
        return {
            selectedCardIndex: 0,
            cardList: [
                "/static/images/lervor/travel/1.jpg",
                "/static/images/lervor/travel/2.jpg"
            ]
        }
    },
    methods: {
        swiperChange(e) {
            this.selectedCardIndex = e.detail.current
        }
    }
}
```

思考

如何通过滤镜实现类似下图的 `背景毛玻璃` 效果？

![](/images/20210330/1617102392834.jpg)