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 就很简单了。

希望可以帮到小伙伴们。

Angular中使用Swiper不能滑动的解决方法的更多相关文章

  1. Angular4中使用后台去数据,Swiper不能滑动的解决方法(一)

      Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,很受很多设计师的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide ...

  2. sql server 还原数据库后,删除用户,提示数据库主体在该数据库中拥有架构,无法删除解决方法

    将另一台服务器上的数据库备份文件,在现在用的这台服务器上还原之后,再创建相同的用户名,提示用户已存在 想将之前的用户先删除掉,却提示“数据库主体在该数据库中拥有架构,无法删除解决方法” 在网上找到方法 ...

  3. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  4. ASP.NET Web Service中使用Session 及 Session丢失解决方法 续

    原文:ASP.NET Web Service中使用Session 及 Session丢失解决方法 续 1.关于Session丢失问题的说明汇总,参考这里 2.在Web Servcie中使用Sessio ...

  5. Linux中切换用户变成-bash4.1-$的解决方法【转】

    转自 Linux中切换用户变成-bash4.1-$的解决方法 - xia_xia的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/xia_xia0919/articl ...

  6. Oracle 18c 数据库中scott用户不存在的解决方法

    Oracle 18c 数据库中scott用户不存在的解决方法 注:该文为转载 上面标题可直接跳转 原文地址:http://www.cnblogs.com/zangdalei/p/5482732.htm ...

  7. 记一次SpringBoot 开发中所遇到的坑和解决方法

    记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型出现空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Inte ...

  8. jquery.ajax的url中传递中文乱码问题的解决方法

    jquery.ajax的url中传递中文乱码问题的解决方法   JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQu ...

  9. JabRef中添加中文文献出现乱码 解决方法

    JabRef中添加中文文献出现乱码 解决方法     问题描述 JaBRef是一款开源的文献管理软件,主要用来管理bibtex格式的参考文献,可以与LATEX配合使用,方便论文参考文献的使用.文献管理 ...

随机推荐

  1. 一句话告诉你JQuery $(this)到底指的是什么,怎么用

    看了网上好多关于jquery $(this)的解释,感觉都说的很模糊. 下面说出我自己的理解. this表示的是当前对象,下面以例子来说明 <!DOCTYPE html> <html ...

  2. How to image a CD/DVD ROM and generate hash value

    Someone ask me how to image a CD/DVD ROM and generate hash value in the same time. A small tool call ...

  3. zabbix监控rds

    问题:使用zabbix监控rds,用之前的脚本,执行总是会有密码安全提示: [root@iZ25m1box8cZ alertscripts]# sh rds.sh Uptime mysqladmin: ...

  4. Java学习笔记——排序算法之进阶排序(堆排序与分治并归排序)

    春蚕到死丝方尽,蜡炬成灰泪始干 --无题 这里介绍两个比较难的算法: 1.堆排序 2.分治并归排序 先说堆. 这里请大家先自行了解完全二叉树的数据结构. 堆是完全二叉树.大顶堆是在堆中,任意双亲值都大 ...

  5. LNMP1.3一键安装Linux环境,配置Nginx运行ThinkPHP3.2

    LNMP1.3一键安装Linux环境,配置Nginx运行ThinkPHP3.2 你是否遇见过:安装LNMP1.3环境后,运行ThinkPHP 3.2,只能打开首页,不能访问控制器,报404错误. 按照 ...

  6. iOS安全攻防之使用 Frida 绕过越狱设备检测

    Frida 是 一款有趣的手机应用安全分析工具. 文章参考:Bypass Jailbreak Detection with Frida in iOS applications 在 Mac Termin ...

  7. js的event事件

    一 .  焦点:使浏览器能够区分区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置焦点 1.点击 2.tab   3.js 不是所有元素都能够接受 ...

  8. javascript中break和continue的区别

    1.break:跳出循环. 2.continue:跳过循环中的一个迭代.(迭代:重复反馈过程的滑动,其目的是为了逼近所需目标或结果.每一次对过程的重复称为一次"迭代",而每一次迭代 ...

  9. Eclipse之JSON导包

    1.选中要导包的工程-–>2.右击选择创建文件夹--->3.将要导的包复制到该文件夹下--–>4.右击要导入的包-->5.选择Build path->Add to Bui ...

  10. vue-cli webpack在node环境下安装使用

    第一步,需要下载并安装node.js以及他的npm组件: 第二步,用node -v;npm -v来测试node.js以及npm是否安装成功(建议用GIT命令行工具,因为GIT是linux系统),如果显 ...