vue使用swiper调到指定页(非initialSlide)
原创
©著作权归作者所有:来自51CTO博客作者停留的一抹光的原创作品,请联系作者获取转载授权,否则将追究法律责任
使用swiper的Methods方法
watch: {
showIndx(n){
this.$nextTick(function () {
this.$refs.mySwiper.swiper.slideTo(n, 1000, true)
})
},
}
完整模板代码
<template>
<swiper :options='swiperOption' ref="mySwiper" class='swiper-container swiper-no-swiping'>
<swiper-slide>
<div class='res1' @click='changeIndex(1)'></div>
</swiper-slide>
<swiper-slide>
<one></one>
</swiper-slide>
<swiper-slide>
<two></two>
</swiper-slide>
<swiper-slide><three></three></swiper-slide>
<!-- <swiper-slide><four></four></swiper-slide> -->
<div class='swiper-pagination' slot='pagination'></div>
</swiper>
</template>
<script>
export default {
name: '',
data () {
return {
swiperOption: {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: true,
lazyLoading : true,
onSlideChangeEnd: swiper => {
this.page = swiper.realIndex + 1
this.index = swiper.realIndex
alert(123)
},
fade:{crossFade:true},
pagination: {
el: '.swiper-pagination',
clickable: true
}
},
pathName:this.$route.name
}
},
components: {
swiper,
swiperSlide,
one,
two,
three
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
},
change (swiper){
console.log(swiper)
}
},
// 测试
methods:{
//点击跳到对应的index页面
changeIndex(index){
console.log(this.$refs.mySwiper.swiper)
this.$refs.mySwiper.swiper.slideTo(index, 1000, true);//切换到第一个slide,速度为1秒
}
}
}
</script>