标签：卡片式 uniapp indicator 轮播 item 340rpx height width swiper

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。