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 条评论
登录 后参与评论

相关文章

来自专栏AI研习社

一个快速方便的图形化 Python 调试器 —— birdseye | Github 项目推荐

Birdseye 是一个简单快速的 Python 调试器,它可以在函数的调用中记录表达式的值,并且在退出函数后轻松查看。例如: ? 它不是通过逐行浏览来查看表达...

3306
来自专栏李家的小酒馆

Sublime 正则替换

打开替换的窗口 ? 2. 在Find What 写入待匹配的正则表达式,然后在Replace With写上要替换的内容($1代表第一个括号内内容,依次类推...

2560
来自专栏张善友的专栏

代码审查工具StyleCop

“代码审查”或是“代码评审”(Code Review),这是一个流程,当开发人员写好代码后,需要让别人来review一下他的代码,这是一种有效发现BUG的方法。...

1945
来自专栏前端学习心得

LESS即学即用

我们大家都知道HTML和CSS不属于编程语言而是属于标记语言,所以很难像JS一样定义变量、编写方法、实现模块化开发等。而目前的CSS编写模式中,都是定义一些公共...

542
来自专栏李家的小酒馆

Sublime 正则替换

1144
来自专栏流媒体

dll生成和使用

672
来自专栏Small Code

【Python】自动生成命令行工具 - fire 简介

Python 中用于生成命令行接口(Command Line Interfaces, CLIs)的工具已经有一些了,例如已经成为 Python 标准库的 arg...

3409
来自专栏Java技术分享

Intellij IDEA调试功能使用总结

专注于Java领域,追求简洁,每天推送高质量技术文章,实用教程。

2637
来自专栏DeveWork

彻底解决WordPress 中 半角全角字符转义 的问题

WordPress中会默认会自动转义一些字符,如将‘--’转义为‘-’破折号,网络上也称“转换全半角标点符号”或者“代码转义”。因为Wordpress 会智能地...

2485
来自专栏大前端开发

微信小程序中使用co来处理异步流程

co是一个基于ES6 Generator特性实现的【异步流程同步化】写法的工具库。

884

扫码关注云+社区