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

最新推荐文章于 2024-08-08 17:39:02 发布

瑆箫

最新推荐文章于 2024-08-08 17:39:02 发布

阅读量1.5k

点赞数

文章标签： html css3 js vue css

本文链接：https://blog.csdn.net/mo3408/article/details/122228231

版权

本文介绍了如何在uni-app中利用swiper组件创建一个类似飞猪或携程的卡片滑动时背景同步切换的效果。代码示例展示了如何设置样式和事件监听，以及在js中处理滑动切换时的逻辑。关键点包括动态设置滑动间距、卡片背景图的渐变效果以及卡片的缩放动画。

摘要由CSDN通过智能技术生成

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

<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>

　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:

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
        }
    }
}