使用原生的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
}
}