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


    我们在开发旅游专题前端时,经常会遇到需要实现飞猪或携程里面的卡片滑动背景同步切换效果。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 {
             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 {
                 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
            }
        }
    }
    

      

    路是自己走出来的,而不是选出来的。
  • 相关阅读:
    实验十二:面向对象基础 5、构造方法、重载
    实验十一:面向对象基础 3、类、对象、方法实训
    实验十:程序结构与数组 8、数组实训
    实验九:程序结构与数组 6、方法实训
    课后作业:情境三:程序结构与数组 5、方法
    Java获取随机数
    实验八:程序结构与数组 4、循环实训
    情境三:程序结构与数组 4、循环实训
    ES查询优化
    ES配置搜索规则
  • 原文地址:https://www.cnblogs.com/mo3408/p/14414727.html
Copyright © 2020-2023  润新知