swiper4和swiper3动态更新数据正确用法 (vue)
初始化,一般写在$nextTick里,可以防止第一张轮播快速闪过// 初始化轮播图setSwiper: function () {this.$nextTick(function () {this.instantSwiper()})},数据更新后:swiper3:this.mySwiper.stopAutoplay();this.$ne...
·
初始化,一般写在$nextTick里,可以防止第一张轮播快速闪过
// 初始化轮播图
setSwiper: function () {
this.$nextTick(function () {
this.instantSwiper()
})
},
数据更新后:
swiper3:
this.mySwiper.stopAutoplay();
this.$nextTick(function(){
this.mySwiper.update();
this.mySwiper.reLoop();
this.mySwiper.startAutoplay();
})
swiper4:
if (this.swiper) {
this.swiper.autoplay.stop()
this.$nextTick(function(){
this.instantSwiper()
this.swiper.autoplay.start()
})
}
这里写一下swiper4里的swiper初始化方法
instantSwiper: function () {
this.swiper = new Swiper('.art_swiper', {
loop:true,
autoplay: {
disableOnInteraction: false,//增加此属性即可
},
speed: 500,
// loop:true,
// autoplay: 3000,
autoplayDisableOnInteraction: false,
direction: 'vertical',
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
observeSlideChildren: true,
});
},
swiper3和swiper4初始化方法不同,可见这篇文章
添加链接描述
更多推荐
已为社区贡献4条内容
所有评论(0)