Vue-awesome-swiper: autoplay: true, loop:true时; 配合 vue-i18n切换语言时, <swiper-slide>{{$t('text')}}</swiper-slide>里面的文字text不会变化

Created on 22 Oct 2018 · 7Comments · Source: surmon-china/vue-awesome-swiper

中文用户注意：

autoplay: true, loop:true时; 配合 vue-i18n切换语言时, {{$t('text')}}里面的文字text不会变化

Swiper loop

Source

admin00001

Most helpful comment

watch: {
  updated () {
        if (this.homeSwiper) {
          this.$nextTick(() => {
            this.homeSwiper.loopDestroy()
            this.homeSwiper.loopCreate()
          })
        }
      }
}

zipme on 17 Dec 2018

👍4

All 7 comments

我也遇到这个问题，假如有三张图片，swiper会多2张图片，一张占0位置，一张过渡，第一次循环234，往后每次都是循环345，能点击下标是245，渲染页面的是3位置是在第一次循环的234之前赋值的，这个之前也在页面调用i18n改变语言之前。。。。。所以会出这个问题

duuliy on 24 Oct 2018

怎么解决的呢

xueqiliu on 19 Nov 2018

避免这个问题，方案一：不用这个swipper了，确实，就一个轮播，代码400+k，太大，可以找个新的；方案二：不用loop:true参数，改为loop:false；当时时间紧急我用了方案2

admin00001 on 19 Nov 2018

watch: {
  updated () {
        if (this.homeSwiper) {
          this.$nextTick(() => {
            this.homeSwiper.loopDestroy()
            this.homeSwiper.loopCreate()
          })
        }
      }
}

zipme on 17 Dec 2018

👍4

watch: {
  updated () {
        if (this.homeSwiper) {
          this.$nextTick(() => {
            this.homeSwiper.loopDestroy()
            this.homeSwiper.loopCreate()
          })
        }
      }
}

这位老哥解决了我的大问题，我用的swiper4 异步后发现首页数据不变，查证后发现是Loop不会重新复制，这两个方法可是救了命了给你99个赞