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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 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
PHP 和 HTML
2006/10/09 PHP
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
js中的闭包学习心得
2018/02/06 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Python生成器以及应用实例解析
2018/02/08 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
致共产党员倡议书
2014/04/16 职场文书
趣味运动会策划方案
2014/06/02 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
500字作文之周记
2019/12/13 职场文书