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

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

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

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

rush:js;">
一个滑动页内容

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

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

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

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

任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程之家网站的支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...