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


Posted in Javascript onNovember 15, 2016

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

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

Javascript 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
初识Node.js
Sep 03 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
AngularJS extend用法详解及实例代码
Nov 15 #Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 #Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 #Javascript
javascript实现消灭星星小游戏简单版
Nov 15 #Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 #Javascript
禁用backspace网页回退功能的实现代码
Nov 15 #Javascript
sea.js常用的api简易文档
Nov 15 #Javascript
You might like
Apache服务器无法使用的解决方法
2013/05/08 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
JavaScript重载函数实例剖析
2016/05/13 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Python通过正则表达式选取callback的方法
2015/07/18 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
Python实现自动签到脚本功能
2020/08/20 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
电子商务优秀毕业生求职信
2014/07/11 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
项目安全员岗位职责
2015/02/15 职场文书
护士业务学习心得体会
2016/01/25 职场文书
《给予树》教学反思
2016/03/03 职场文书