在Vue2.0中使用swiper进行来展示图片轮播或翻页效果
先 npm i vue-awesome-swiper
html部分:
<swiper :options="swiperOption" ref="mySwiper" class='swipers' @touchEnd="touchEndFunc">
<swiper-slide v-for="(item,index) in gameList" :key="item.id" :id="item.id">
</swiper-slide>
<divclass="swiper-pagination" slot="pagination"></div>
</swiper>
js部分:
import { swiper, swiperSlide } from 'vue-awesome-swiper'
data({
return{
swiperOption: {
autoplayDisableOnInteraction: false,
//loop:true,
notNextTick: true,
centeredSlides: true,
slidesPerView: 5,
initialSlide: 2,
loopedSlides: 2,
pagination: {
el: '.swiper-pagination',
clickable: 'click'
},
paginationClickable: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
slideToClickedSlide: true,
on: {
touchEnd: function() {
//this.getData();
}
},
breakpoints: {
668: {
slidesPerView: 2,
}
}
}}
})
computed: {
swiper() {
return this.$refs.mySwiper.swiper//引入(好像可以不用这句话)
}
},
methods:{
touchEndFunc(data) {
setTimeout(() => {
this.checkIndex = this.$refs.mySwiper.swiper.activeIndex;//通过延迟来获取滑动之后的当前index
}, 300);
},
}