vue-awesome-swiper中点击外部按钮实现图片切换到下一张
created() {var _this = this_this.swiperOption={pagination:{el:'.swiper-pagination',},on: {slideChangeTransitionEnd: function(){_this.swiperids=this.activeIndexconsole.log(_this.swiperids)if(_this
·
created() {
var _this = this
_this.swiperOption={
pagination:{
el:'.swiper-pagination',
},
on: {
slideChangeTransitionEnd: function(){
_this.swiperids=this.activeIndex
console.log(_this.swiperids)
if(_this.swiperids==0){
_this.ispost=true
_this.iscurriculum=false
}
if(_this.swiperids==1){
_this.ispost=false
_this.iscurriculum=true
}
},
},
}
}
我的swiper是这样声明的
然后现在有一个需求使点击底部的一个按钮实现swiper中的图片切换到下一张,在网上看到的一种方法先记下来
<swiper :options="swiperOption" ref="demoSwiper" >
主要是这个ref(命名就随便了)
接下来就是一个点击触发切换的事件
jump_ce1(){
//因为我的按钮在底部 这是一个回到顶部的方法
document.body.scrollTop = document.documentElement.scrollTop = 0
//这个是触发切换到下一张图的方法
this.$refs.demoSwiper.swiper.slideNext()
//这个是触发切换到上一张图的方法
this.$refs.demoSwiper.swiper.slidePrev();
},
更多推荐
已为社区贡献2条内容
所有评论(0)