Angular4中使用后台去数据,Swiper不能滑动的解决方法(一)
Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,很受很多设计师的欢迎。
今天在使用Swiper的时候遇到这个问题:
使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成n个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用。
<div class="swiper-wrapper" >
<div class="swiper-slide" ng-repeat="result in mediaList">
<img src="{{result.navImage}}">
</div>
</div>
代码执行时候发现,手动复制n个循环部分,则可以滑动n个块;手动调节窗口大小,使页面大小发生改变后,可以正常滑动。
初始化的时候自动检测swiper-wrapper下有多少个swiper-slide,则允许滑动多少个img。 而在angular始终在swiper初始化之后定义,swiper则无法判断有多少个slide,所以划不动。
参考资料之后发现swiper有这样两个参数:observer和observeParents。
observer,当改变swiper的样式(隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
observeParents,只是将observe应用于Swiper的父元素。两者默认值都为false。
所以在原来的swiper初始化代码中加上这两行就可以了。
var mySwiper = new Swiper('.swiper-container',{
autoplay:2500,
loop:true,
autoplayDisableOnInteraction:false,
pagination : '.swiper-pagination',
paginationClickable: true,
longSwipesRatio: 0.3,
touchRatio:1,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
})
这样的话,angular 实现swiper 就很简单了。
希望可以帮到小伙伴们。
Angular4中使用后台去数据,Swiper不能滑动的解决方法(一)的更多相关文章
- 在oracle中存入date类型数据遇到的问题及其解决方法(利用java.sql.date和Timestamp)
转自:https://blog.csdn.net/ShadowerWArden/article/details/80652377 1. 使用JDBC操作Oracle数据库时,使用java.sql.Da ...
- Angular中使用Swiper不能滑动的解决方法
Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,很受很多设计师的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类, ...
- struts2中从后台读取数据到<s:select>
看到网上好多有struts2中从后台读取数据到<s:select>的,但都 不太详细,可能是我自己理解不了吧!所以我自己做了 一个,其中可能 有很多不好的地方,望广大网友指出 结果如图 p ...
- 关于真机调试DDMS中的data文件夹打不开的解决方法
关于真机调试DDMS中的data文件夹打不开的解决方法 今天在开发的时候需要导出程序中的数据库文件查看数据,数据库文件默认就在/data/data/应用包名/databases/数据库名 这个路径下, ...
- 浅析Mysql 数据回滚错误的解决方法
介绍一下关于Mysql数据回滚错误的解决方法.需要的朋友可以过来参考下 MYSQL的事务处理主要有两种方法.1.用begin,rollback,commit来实现begin 开始一个事务rollbac ...
- 浅析Mysql数据回滚错误的解决方法
介绍一下关于Mysql数据回滚错误的解决方法.需要的朋友可以过来参考下 MYSQL的事务处理主要有两种方法. 1.用begin,rollback,commit来实现 begin 开始一个事 ...
- SecureCRT中某些命令提示符下按Backspace显示^H的解决方法
SecureCRT中某些命令提示符下按Backspace显示^H的解决方法 安装了Apache Derby数据库服务器之后,使用ij客户端去连接derby服务端,可是在ij中输入命令的时候,每当输入错 ...
- Node.js中针对中文的查找和替换无效的解决方法
Node.js中针对中文的查找和替换无效的解决方法. //tags的值: tag,测试,帖子 var pos1 = tags.indexOf("测"); //这里返回-1 ta ...
- mysql left join 右表数据不唯一的情况解决方法
mysql left join 右表数据不唯一的情况解决方法 <pre>member 表id username1 fdipzone2 terry member_login_log 表id ...
随机推荐
- Sting、StringBuffer、StringBuilder
(1)String是字符串常量,一旦创建之后不可更改:StringBuffer和StringBuilder是字符串变量,可以更改.String的不可变,所以适合作为Map的键. (2)StringBu ...
- Reward List 赏金列表
博主昨晚正在刷题,突然手机语音大声提示“微信支付收款到账”,把博主吓了一跳,打开一看,居然收到了第一笔打赏,还是博主最喜欢的数字,老开心了-感谢网友对于博主工作的认可与支持,多谢多谢!不管大家是物质打 ...
- linux中安装python+selenium+chrome
- python中的包与模块
'''模块与模块之间的调用''' import first #调用整个变量 print(first.Index) # #调用函数 print(first.hello()) # per = first. ...
- [Luogu P1495]曹冲养猪
题目链接 中国剩余定理(孙子定理)的裸题.直接放代码. #include<iostream> #include<cstdio> #include<algorithm> ...
- day29 二十九、元类、单例
一.eval.exec内置函数 1.eval函数 eval内置函数的使用场景: ①执行字符串会得到相应的执行结果 ②一般用于类型转换得到dict.list.tuple等 2.exec函数 exec应用 ...
- jpython basic
https://blog.csdn.net/zhongweijian/article/details/4742549https://www.jython.org/downloads.htmlhttps ...
- jar包通过exe4j打包成exe可执行文件
https://blog.csdn.net/jia611/article/details/42060945 参照此文即可,注意,我的是maven打包成的jar,选择maincalss时,需要选择jar ...
- yii的数据库相关操作
获取某一列数据 self::find()->where(['pid'=>$this->id])->select('id')->column(); 更新操作 $model- ...
- Linux下Netty实现高性能UDP服务(SO_REUSEPORT)
参考: https://www.jianshu.com/p/61df929aa98b SO_REUSEPORT学习笔记:http://www.blogjava.net/yongboy/archive/ ...