swiper 划不动问题

2019年9月14日 137次阅读 来源: 条件状语从句

Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。
今天在使用Swiper的时候遇到这个问题：

使用模板引擎动态生成
swiper-slide类，在
swiper-wrapper里生成6个以上的滑动页，可是就是划不到第二页，尝试将
longSwipesRatio的值修改到最小，仍然不起作用。

<div class="swiper-container" ms-visible="result.status==1">
<div class="swiper-wrapper" >
     <!-- =======循环部分======= -->
      <div class="swiper-slide" ms-repeat="result.mediaList">
         //此处为一个滑动页内容
      </div>    
      <!-- ============== -->
</div>
</div>

在测试时发现，手动复制n个循环部分，则可以滑动n个块；手动调节窗口大小，使页面文档发生改变（动态响应）后，可以正常滑动。
于是猜测swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。
而数据在swiper初始化之后才异步请求到，swiper则无法正确scan有多少个slide（实际上找到一个待循环模板），所以划不动。

找到原因后，只须对症下药。在查阅Swiper的API时发现，有这样两个参数：observer和observeParents，前者启动动态检查器，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。后者原理和前者一样，只是将observe应用于Swiper的父元素。两者默认值都为false。
所以在原来的swiper初始化代码中加上这两行即可。

var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
    paginationClickable: true,
    //……
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
})

若对您有帮助，可以赞助并支持下作者哦，谢谢！
《swiper 划不动问题》

    原文作者：条件状语从句
    原文地址: https://segmentfault.com/a/1190000002962202
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞