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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue3实现v-model原理详解
Oct 09 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 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
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
Js组件的一些写法
2010/09/10 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python实现折半查找和归并排序算法
2017/04/14 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
Python类型转换的魔术方法详解
2020/12/23 Python
python如何修改文件时间属性
2021/02/05 Python
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
医院护士专业个人的求职信
2013/12/09 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
重阳节慰问信
2015/02/15 职场文书
首都博物馆观后感
2015/06/05 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP