uniapp 卡片式轮播图

html结构：

uniapp自带的swiper 组件可以弄成寻常的轮播图

 

<swiper class="image-container" prevIoUs-margin="45rpx"
　　next-margin="45rpx" circular autoplay indicator-dots indicator-color="#9d9080"
　　indicator-active-color="#fffffb" @change="swiperChange">
　　<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
　　　　v-for="(item, index) in imgList" :key="index" lazy-load
　　　　:style="dontFirstAnimation ? 'animation: none;' : ''">
　　　　<view class="item" :class="currentIndex == index ? 'item-img' : 'item-img-side'">
　　　　　　<image :src="item" alt=""></image>
　　　　</view>
　　</swiper-item>
</swiper>

JavaScript结构：

 

export default {
　　data() {
    　　return {
       　　imgList: [
          　　'https://cdn.uviewui.com/uview/swiper/swiper1.png',
              'https://cdn.uviewui.com/uview/swiper/swiper2.png',
              'https://cdn.uviewui.com/uview/swiper/swiper3.png',
           ], //轮播图图片
           currentIndex: 0,
           dontFirstAnimation: true,
           Inv: 0,
           navIndex: 0,
           indicator: true,
　　　　　}
    },

 

css结构：

 

        .image-container {
            width: 750rpx;
            height: 360rpx;
        }

        .item {
            width: 100%;
            height: 100%;

            image {
                width: 100%;
                height: 340rpx;
                border-radius: 20rpx;
                Box-shadow: 2px 2px 18px rgba(0, 0, 0, 0.12);
            }
        }

        .item-img {
            width: 630rpx;
            height: 340rpx;
            border-radius: 14rpx;
            animation: to-big .3s;
        }

        .swiper-item {
            width: 630rpx;
            height: 340rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .item-img-side {
            width: 630rpx;
            height: 298rpx;
            border-radius: 14rpx;
            animation: to-mini .3s;
        }

        .swiper-item-side {
            width: 630rpx;
            height: 298rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @keyframes to-mini {
            from {
                height: 340rpx;
            }

            to {
                height: 298rpx;
            }
        }

        @keyframes to-big {
            from {
                height: 298rpx;
            }

            to {
                height: 340rpx;
            }
        }

 

最后看看效果