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

swiper是很常用的一个组件,我项目中用到的版本是4.1.6。刚开始,我就按照官网的案例写了个demo,当然图片都是静态写死的,确实可以轮播了,但是我项目的需求是要动态修改轮播图的内容。然后我就改成vue的方式了,js和css是通过cdn引入的。下面是swiper的全部代码:

有问题请加群交流java群:200909980vue群: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 height
          spaceBetween: 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,当然我这里也不行

以上方法,大家都试试,可能是我这里环境问原因吧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

Vim 配置入门

Vim 的配置不太容易,它有自己的语法,许许多多的命令。我总是记不清楚,所以就整理了下面这篇文章,列出主要配置项的含义。

1611
来自专栏我和未来有约会

基于Cairngorm的Silverlight开发 - part5

搭建完整的Cairngorm项目 到这里已经都知道了如何独立的运用Cairngorm中两个特殊的部分,ModelLocator模型和View视图,现在需要的就是...

3615
来自专栏逍遥剑客的游戏开发

Nebula3 Render Application Wizard

1653
来自专栏程序员的SOD蜜

Vue.js 入门指南之“前传”(含sublime text 3 配置) 1,下载安装Node.js2,配置Vue环境3,Vue初探4,配置sublime Text

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指...

3899
来自专栏小白安全

JavaScript危险函数 - HTML操作

1. HTML操作函数简介  当一个方法或操作允许HTML操作,如果有可能控制(甚至部分)参数,则可能在某种程度上操纵HTML,从而获得对用户界面的控制...

4718
来自专栏Java技术分享

第九章:Shiro的Web——深入浅出学Shiro细粒度权限开发框架

Shiro可以和普通web集成的,但考虑到现在的应用基本都会使用spring,所以就不去讲最基本的web集成了。跟Spring集成的方式前面已经讲过了。

1978
来自专栏Android开发指南

eclipse使用和快捷键

4289
来自专栏知晓程序

开发 | 天天用小程序页面跳转接口,但你真的了解它们吗?

今天,知晓程序(微信号 zxcx0101)就来为你详细解析,小程序中有关页面跳转的 4 个接口,帮助你更有效地利用小程序的 5 层页面层级限制。

1623
来自专栏逸鹏说道

VSCode中文乱码问题+Git环境配置

异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html 1.VSCode中文乱码问题 (file...

4478
来自专栏ShaoYL

XCode的debug断点调试

3647

扫码关注云+社区

领取腾讯云代金券