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 相关文章推荐
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
编写PHP的安全策略
2006/10/09 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
微信小程序 首页制作简单实例
2017/04/07 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
医药代表个人的求职信分享
2013/12/08 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
预备党员的自我评价
2014/03/12 职场文书
小学英语课后反思
2014/04/26 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
先进典型发言材料
2014/12/30 职场文书
国王的演讲观后感
2015/06/03 职场文书
初中团支书竞选稿
2015/11/21 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
pandas取dataframe特定行列的实现方法
2021/05/24 Python