swiper 划不动问题

eechen 发布于2019-08-21 10:34 / 2615人阅读

摘要：是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。而数据在初始化之后才异步请求到，则无法正确有多少个实际上找到一个待循环模板，所以划不动。找到原因后，只须对症下药。两者默认值都为。

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

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



     
      
         //此处为一个滑动页内容

在测试时发现，手动复制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 swiper cdn swiper.js 不动了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85787.html

有赞vant-ui Tabs、List、PullRefresh组件实践

摘要：建议，每个栏目下放一个空列表组件，将空组件放在下拉刷新组件里面。下拉刷新请求两次。请求结束后必须把下拉刷新绑定的置为，要不然又会多请求一次魅族手机按键返回桌面，再重新回到后列表上下划不动。魅族的返回键问题，在换用列表插件后得到解决。 Vant ui + Vue.js 部分组件实践功能需求是实现一个移动端的栏目列表切换，于此同时列表需要进行下拉刷新，上拉加载如下图，大概是一个这样...

habren 2019-08-26 12:17 评论0 收藏0
使用React和Node.js制作音乐类App的一次总结

摘要：在通信时，如果要将返回的数据，那么请注意的同异步场景，准确把控渲染和设置状态时间差逻辑，特别是多个请求，可以使用或者在的回调函数中发送请求，定时器把控时间。一、技术选型语言选择： JavaScript TypeScript 最终选择了JavaScript作为开发语言，一开始尝试使用TypeScript，但是由于是移动端，antd-mobile的库与TS有那么一些不兼容，官方文...

edgardeng 2019-08-02 16:12 评论0 收藏0
使用React和Node.js制作音乐类App的一次总结

摘要：在通信时，如果要将返回的数据，那么请注意的同异步场景，准确把控渲染和设置状态时间差逻辑，特别是多个请求，可以使用或者在的回调函数中发送请求，定时器把控时间。一、技术选型语言选择： JavaScript TypeScript 最终选择了JavaScript作为开发语言，一开始尝试使用TypeScript，但是由于是移动端，antd-mobile的库与TS有那么一些不兼容，官方文...

helloworldcoding 2019-08-23 16:49 评论0 收藏0
使用React和Node.js制作音乐类App的一次总结

摘要：在通信时，如果要将返回的数据，那么请注意的同异步场景，准确把控渲染和设置状态时间差逻辑，特别是多个请求，可以使用或者在的回调函数中发送请求，定时器把控时间。一、技术选型语言选择： JavaScript TypeScript 最终选择了JavaScript作为开发语言，一开始尝试使用TypeScript，但是由于是移动端，antd-mobile的库与TS有那么一些不兼容，官方文...

kviccn 2019-08-29 18:33 评论0 收藏0