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制作滚动图不能滑动的解决方法，希望对大家有所帮助，如果大家有
任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
今天小编就为大家分享一篇angularJs复选框checkbox选中进行ng-show显示隐藏的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
Facade Service暴露commands简化代码逻辑提高可访问性组合性
在 Angular 应用开发中,使用 Facade Service 暴露 commands（命令）以及订阅这些 commands 是一个常见的设计模式,本文将详细介绍在 Facade Service 中如何实现这一目标,并深入探讨相关细节,以及通过实际示例进行说明2023-10-10
这篇文章主要介绍了AngularJS初始化过程分析(引导程序),这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了Angular2 自定义表单验证器的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了AngularJS实现表单验证，客户端表单验证是AngularJS里面最酷的功能之一。AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单，对AngularJS表单验证感兴趣的小伙伴们可以参考一下2015-12-12
Angular.JS判断复选框checkbox是否选中并实时显示
最近因为工作需要做了一个选择标签的功能，把一些标签展示给用户，用户选择自己喜欢的标签，就类似我们在购物网站看到的那种过滤标签似的，所以这篇文章就给大家介绍了Angular.JS判断复选框checkbox是否选中并实时显示的方法，下面来一起看看吧。2016-11-11
本文主要介绍AngularJS模板的资料知识，这里帮大家整理了详细的模版资料，及实现示例代码，帮助大家学习AngularJS的知识，有需要的小伙伴可以参考下2016-08-08
本文主要介绍AngularJS API,这里对AngularJS的指令,事件,全局API等做中文翻译,希望能帮助有需要的小伙伴2016-07-07
Angularjs中如何使用filterFilter函数过滤
这篇文章主要介绍了Angularjs中如何使用filterFilter函数过滤的相关资料,需要的朋友可以参考下2016-02-02
下面小编就为大家分享一篇angular2中使用第三方js库的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论