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

￡神魔★判官ぃ 2022-05-30 08:50 129阅读 0赞

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 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,当然我这里也不行

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

## 关注 ##

如果有问题，请在下方评论，或者加群讨论 `128806068`

关注下方微信公众号，可以及时获取到各种技术的干货哦，如果你有想推荐的帖子，也可以联系我们的。

![这里写图片描述][70]

[70]: /images/20220530/6c52a2edb15a4d608d0c43efe4727212.png