vue 打开页面自动获取数据_在vue中swiper动态获取数据渲染时产生的问题

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

轮播里面的文字是后端返回给前端的，我直接用vue渲染，此时的需求是后端返回的数据在变更了之后应该在页面上实时更新，但是实际情况并非如此。

所以用到了Vue原生api：Vue.nextTick()，在数据改变之后立马在视图里面渲染出来，但是这时还是有问题，因为"swiper-slide"这一项是vue批量生成的，这造成了swiper切换的问题。所以在js中我先停掉上一个swiper，在数据更新并且渲染在了dom中，再开启一个swiper：

{{item}}

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

this.lockUpSwiper();

this.loopInfo = [];

Vue.nextTick(function () {

console.log('更新dom');

// self.unlockUpSwiper();

self.topLoop(); //DOM更新时直接开启swiper不用解锁上一个上了锁的swiper，因为dom更新了，上一个swiper被干掉了

})

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

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分别是：

.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}

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

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

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