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