AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
10 浏览量
2020-10-21
03:16:50
上传
评论
收藏 51KB PDF 举报
AngularJS 中使用中使用Swiper制作滚动图不能滑动的解决方法制作滚动图不能滑动的解决方法
Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。这篇文
章主要介绍了AngularJS 中使用Swiper制作滚动图不能滑动的解决方法,需要的朋友可以参考下
Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。
今天在使用今天在使用Swiper的时候遇到这个问题：的时候遇到这个问题：
使用angularjs动态循环生成swiper-slide类，在swiper-wrapper里生成6个以上的滑动页，可是就是划不到第二页，尝试将
longSwipesRatio的值修改到最小，仍然不起作用。
<div class="swiper-wrapper" >
<!-- =======循环部分======= -->
<div class="swiper-slide" ng-repeat="result in mediaList">
//此处为一个滑动页内容
</div>
<!-- ============== -->
</div>
</div>
在测试时发现，手动复制n个循环部分，则可以滑动n个块；手动调节窗口大小，使页面文档发生改变（动态响应）后，可以
正常滑动。
于是猜测swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。 而
在angular始终在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,
longSwipesRatio: 0.3,
touchRatio:1,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})
以上所述是小编给大家介绍的AngularJS 中使用Swiper制作滚动图不能滑动的解决方法，希望对大家有所帮助，如果大家有
任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
评论0
最新资源