AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

高洛峰

发布时间：2016-12-29 10:38:26

1740人浏览过

来源于php中文网

原创

swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。

今天在使用Swiper的时候遇到这个问题：

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




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

在测试时发现，手动复制n个循环部分，则可以滑动n个块；手动调节窗口大小，使页面文档发生改变（动态响应）后，可以正常滑动。

于是猜测swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。而在angular始终在swiper初始化之后定义，swiper则无法正确scan有多少个slide（实际上找到一个待循环模板），所以划不动。

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

eMart 网店系统

功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标

下载

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制作滚动图不能滑动的解决方法，希望对大家有所帮助，如果大家有

任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对PHP中文网的支持！

更多AngularJS 中使用Swiper制作滚动图不能滑动的解决方法相关文章请关注PHP中文网！

如何让轮播图（Carousel）焦点图片居中显示并实现缩放过渡效果

如何在 AngularJS 中实现上下两组字段的点击连线功能

如何在 Swiper 9.4.1 中正确启用 Fade 切换效果

如何为多个 Swiper 实例配置独立的导航箭头与分页器

如何解决 Swiper 多实例中导航箭头全局触发的问题

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：AngularJS使用ng-repeat指令实现下拉框下一篇：angularjs实现文字上下无缝滚动特效代码

作者最新文章

实现一个 Java 版的 Redis