在vue中swiper动态获取数据渲染时产生的问题

在项目中有这样一个需求：顶部上下轮播用户获奖信息

轮播里面的文字数据是后端返回给前端的，我直接用vue渲染，但是改变数据后没有实时显示在视图里面，
所以用到了Vue原生api：Vue.nextTick()，在数据改变之后立马在视图里面渲染出来，这就涉及到了swiper切换的问题，因为我是批量生成的：

1
2
3

<div class="swiper-slide" v-for="item in loopInfo">
    <span>{{item}}</span>
</div>

在需要更新数据时这样写：

this.lockUpSwiper();
this.loopInfo = [];
Vue.nextTick(function () {
    console.log('更新dom');
    // self.unlockUpSwiper();
    self.topLoop();     //DOM更新时直接开启swiper不用解锁上一个上了锁的swiper，因为dom更新了，上一个swiper被干掉了
})

其中lockUpSwiper();是我自己封装的方法，里面就两行代码：

1 2	this.topSwiper.lockSwipeToPrev(); this.topSwiper.lockSwipeToNext();

topSwiper是swiper实例，lockSwipeToPrev()和lockSwipeToNext()是swiper的api，就是字面意思：锁住swiper不让swiper上翻或者下翻，那么问题来了，为什么要锁住swiper而不用解锁呢：self.unlockUpSwiper();。在锁住swiper后由于改变了数据，实际上swiper已经重新被定义了，这时候如果调用self.unlockUpSwiper();会导致swiper数据错乱，简单形容现象就是乱刷，具体为什么会乱刷需要看源码中的逻辑，感兴趣的大家可以看一下，这里就不深究原因啦只小小的展开一下，

错误图片：

正常图片：

从上面两张图可以看出出错时同一时间有6个(甚至更多)项目在切换class，这直接导致样式错乱。而正常时只有4个项目在切换class。swiper是通过添加和删除样式来改变每一项，具体的swiper-slide所在的元素上的改变是三个class：
swiper-slide-prev``swiper-slide-active``swiper-slide-next，分别对应上一个显示内容，当前显示内容和下一次显示的内容，在swiper.css中，这三个class分别是：

1	.swiper-slide-prev{pointer-events:auto;visibility:visible}

.swiper-slide-active{pointer-events:auto}
或者
.swiper-container-cube .swiper-slide-active{pointer-events:auto;visibility:visible}

1	.swiper-slide-next{pointer-events:auto;visibility:visible}

可以看到active有visiblity的状态变化，具体需要参照.swiper-slide的样式来看，这里也不过分展开了。

写了一堆有的没的，把想表达的总结一下：swiper中的切换项在改变之前应该停止siper，然后项目就为之后不需要开启(unlockto)swiper，而重新实例化一个swiper就可以了。swiper是一款可用度非常高的插件，希望大家将使用中遇到的问题和解决办法总结出来分享出来。