uniapp卡片式轮播图

使用原生的swiper组件标签

<swiper style="height:240rpx" class="swiper-tall" :autoplay="true" :interval="3000" :duration="500" circular='true'
	:display-multiple-items="4" current='0' @change="partSwiperChange">
	<swiper-item v-for="(list,i) in 6" :key="i">
		<view class='swiper-item gswGoods' data-type="goods" :data-id="list.id" :data-index="i">
			<view class="img-content u-flex u-row-between u-flex-col"
						:class="[ partcurrentIndex === i || partcurrentIndexA === i?'active':'un-active']">
				<view class="top">
					￥<span>{{swiper.money[i]}}</span>
				</view>
				<view class="bottom">
					{{swiper.discount[i]}}
				</view>
			</view>
		</view>
	</swiper-item>
</swiper>

动态绑定类，当目标项为当年项，添加过渡动画。

@change绑定卡片滑动事件，当前项n+1滑动，当走到最后一页，继续循环

partSwiperChange: function(event) {
	this.partcurrentIndex = event.detail.current + 1
	this.partcurrentIndexA = event.detail.current + 2
	if (event.detail.current == 6 - 2) {
		this.partcurrentIndexA = 6 - 1
		this.partcurrentIndexA = 0
	}
	if (event.detail.current == 6 - 1) {
		this.partcurrentIndex = 0
		this.partcurrentIndexA = 1
	}
}