其他分享
首页 > 其他分享> > uniapp 卡片式轮播图

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

 

最后看看效果

 

标签:卡片式,uniapp,indicator,轮播,item,340rpx,height,width,swiper
来源: https://www.cnblogs.com/huangjunhua/p/16580963.html