最近在公司写活动页面时，要求点击四种商品目录，下面呈现不同的商品进行轮播。在这里我并没有创建四个swiper，而是在一个swiper里通过动态的更改data来实现功能。
html代码

<swiper class="draw-swiper" :options="swiperOption" ref="goodSwiper" v-if="goodVisibility">
            <swiper-slide v-for="(item,index) in goodList[isIndex]" :key="item.title">
              <div class="item">
                <div>
                  <img :src="item.img" alt="">
                  <span class="sp" v-html="item.mess"></span>
                </div>
                <span>{{item.title}}</span>
              </div>
            </swiper-slide>
 </swiper>

简单讲解下就是商品数据放在goodList里，通过点击四种商品目录，更改isIndex的值，来实现动态更改goodList对应的数值
但是，问题出现了，虽然我成功的改变了轮播的商品，不过因为我在swiperOption里设置了loop为true,导致轮播一轮后面的数据一直为goodList[isIndex]的数据
最后通过对swiper进行销毁重新加载的方法解决了这个问题
方法一

this.goodVisibility = false   //在html里通过v-if='goodVisibility '来控制
this.$nextTick(() => {
     this.goodVisibility = true
}

方法二

 this.$refs.goodSwiper.swiper.destroy()   //先销毁
 this.$refs.goodSwiper.mountInstance()   //后在加载