案例代码"/>
vue项目中swiper动态更新后无法轮播问题 附带案例代码
swiper是很常用的一个组件,我项目中用到的版本是4.1.6。刚开始,我就按照官网的案例写了个demo,当然图片都是静态写死的,确实可以轮播了,但是我项目的需求是要动态修改轮播图的内容。然后我就改成vue的方式了,js和css是通过cdn引入的。下面是swiper的全部代码:
有问题请加群交流java群:200909980
,vue群:128806068
,或者在下边评论
vue template 代码
轮播内容是通过循环数组自动生成的
<div class="swiper-container" v-if="markInfo.attachs && markInfo.attachs.length!=0"><div class="swiper-wrapper"><div class="swiper-slide" v-for="item in markInfo.attachs"><img :src="item.url" alt="" height="100%"></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div>div class="swiper-button-next"></div>
</div>
vue js
methods: {initSwiper () {let _this = this_this.mySwiper = null_this.mySwiper = new Swiper('.swiper-container', {autoHeight: true, //enable auto heightspaceBetween: 20,pagination: {el: '.swiper-pagination',clickable: true,},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},})}
}
动态修改数据的回调
Commons.signals.changeSwiper.add((mark) => {_this.markInfo = mark //这块数据修改后,for循环会自动修改数据,但是并不会轮播,所以需要下边的代码重新渲染if(mark.attachs && mark.attachs.length!=0){//没有数据不重新渲染// DOM更新了_this.$nextTick(() => {_this.initSwiper()// swiper重新初始化})}
})
到此解决方案就完毕了。下边是一些其他的解决思路,但是我这边试了是不行的,可能是我的这块配置有问题,但是可以给大家说一下思路。
其他解决思路
1.先把之前所有的内容清空掉,然后一个个增加新的数据,但是我这里remove报错了。
_this.mySwiper.removeAllSlides()
_this.markInfo.attachs.forEach((el, index) => {_this.mySwiper.appendSlide('<div class="swiper-slide"><img src="'+el.url+'" alt="" height="100%"></div>'); //加到Swiper的最后})
2.把之前的组件销毁,然后重新创建,new Swiper,但是我这销毁的时候报错了。
_this.mySwiper.distory(false)
_this.initSwiper()// swiper重新初始化
3.修改为数据后,调用update方法,然后startAutoplay,当然我这里也不行
以上方法,大家都试试,可能是我这里环境问原因吧
关注
如果有问题,请在下方评论,或者加群讨论 128806068
关注下方微信公众号,可以及时获取到各种技术的干货哦,如果你有想推荐的帖子,也可以联系我们的。
更多推荐
vue项目中swiper动态更新后无法轮播问题 附带案例代码
发布评论