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动态更新后无法轮播问题附带案例代码相关推荐

vue项目中如何使用有向无环图（dag-diagram）
vue项目中如何使用有向无环图(dag-diagram) 1.自定义右击事件偶现问题 2.节点删除再添加反复操作几次会出现,删除一个节点多个节点一起消失 3.检测是否成环关于有向无环图在vue项目中 ...
vue 项目中，动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...
Vue 项目中 Swiper(5) 轮播图分页器 swiper-pagination 无法显示问题（解决方案集合）
最近用Vue做项目需要加个轮播效果,安装swiper后,结果分页器死活出不来,但轮播效果和前进后退箭头以及滚动栏都是正常显示的,默认安装的是最新版本swiper@6.4.5,这可把我难住了. < ...
Echarts图表在VUE项目中使用动态数据源
动态数据源问题:目前我使用的方法是当后台查询到数据时,直接传递给option中的对应data内: 例如柱状图,可以直接将x轴数据注入到 this.option.xAxis.data 中,如 this. ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
vue 怎么在字符串中指定位置插入字符_vue项目中在可编辑div光标位置插入内容的实现代码...
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragStart($event, item.labelName)" draggable='true ...
vue光标插入内容_vue项目中在可编辑div光标位置插入内容的实现代码
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragstart($event, item.labelname)" draggable='true ...
Vue项目中ESLint配置（VScode）
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...

vue项目中swiper动态更新后无法轮播问题附带案例代码

其他解决思路

关注

vue项目中swiper动态更新后无法轮播问题附带案例代码相关推荐

最新文章

热门文章

vue项目中swiper动态更新后无法轮播问题 附带案例代码

其他解决思路

关注

vue项目中swiper动态更新后无法轮播问题 附带案例代码相关推荐

最新文章

热门文章

vue项目中swiper动态更新后无法轮播问题附带案例代码

vue项目中swiper动态更新后无法轮播问题附带案例代码相关推荐