美文网首页
swiper在大数据量时的优化方案

swiper在大数据量时的优化方案

作者: bartflyian | 来源:发表于2021-03-15 14:06 被阅读0次

    1.以获取到的数据为testData为例,这里用swiperData来作为swiper循环显示的数据来源。(<swiper-slide v-for="(item,index) in swiperData">),swiperData只取testData的3条数据。
    2.滑动transitionEnd时,调用方法修改swiper-slide当前定位(主要是定到3个中间的位置,不这样处理的话,数据替代之后,slide还是停留在第3个slide;所以需要手动设置)


    resetSwiperData.png

    结果:swiper始终只维护3或3个以下的slide,使得即使是巨大数据量时,依然维持好的滑动体验。

    另外:swiper在ios滑动时会出现闪屏现象我在slide和slide的子结构上加上:
    transform:translate3d(0,0,0);
    overflow:hidden;
    闪屏现象基本消除,偶尔出现

    相关文章

      网友评论

          本文标题:swiper在大数据量时的优化方案

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