美文网首页程序员
在vue中swiper动态获取数据渲染时产生的问题

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

作者: laughing_club | 来源:发表于2018-09-26 18:21 被阅读0次

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

    轮播里面的文字是后端返回给前端的,我直接用vue渲染,此时的需求是后端返回的数据在变更了之后应该在页面上实时更新,但是实际情况并非如此。
    所以用到了Vue原生api:Vue.nextTick(),在数据改变之后立马在视图里面渲染出来,但是这时还是有问题,因为"swiper-slide"这一项是vue批量生成的,这造成了swiper切换的问题。所以在js中我先停掉上一个swiper,在数据更新并且渲染在了dom中,再开启一个swiper:

    <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();是我自己封装的方法,里面就两行代码:

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

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

    错误图片:

    swiper-err.png

    正常图片:

    swiper-ok.png

    从上面两张图可以看出出错时同一时间有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是一款可用度非常高的插件,希望大家将使用中遇到的问题和解决办法总结出来分享出来。

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/wsejoftx.html