文档章节

AngularJS 中使用Swiper制作滚动图不能滑动

冷冷gg
 冷冷gg
发布于 2016/11/15 00:18
字数 484
阅读 425
收藏 9

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
})

© 著作权归作者所有

共有 人打赏支持
冷冷gg
粉丝 366
博文 110
码字总数 49926
作品 1
潍坊
UI设计师
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
Angular中使用Swiper

项目使用的Angular版本是V6.0.3 安装Swiper npm install swiper --save 或者 yarn add swiper --save 在angular.json文件添加swiper.js和swiper.css 安装模组定义档 npm install @types/swi......

小略子
07/07
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0
5-XHRs(XmlHttpRequest)与依赖注入

足以给应用绑定了硬编码数据集中的三条手机数据,让我们从我们的服务中适配更大的数据集,他使用Angular内建的服务中$htttp。我们将使用Angular的依赖注入给提供服务。 现在有20条手机,从服...

奋斗到天明
2015/08/27
0
0
Angular 5 快速入门与提高

一、概述 尽管被称为,实际上它只是这个诞生于2012年的前端框架的的第四个版本: 看起来差不多半年就发布一个新版本,不过实际上从重写的版本开始,开发接口与核心思想就稳定下来了,并基本保...

笔阁
2017/11/03
0
11

没有更多内容

加载失败,请刷新页面

加载更多

jQuery学习笔记180923

jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选...

颖伙虫
24分钟前
0
0
[python] colorama 模块 - 改变控制台输出文本的颜色

除了使用 PyQt 这样的图形化开发框架外,基本上 python 程序都是跑在控制台中的。很多时候,单纯使用黑白的文字不能很好地突出我们要显示的信息。有时候我们需要将错误的提示使用红色标注,而...

cometeme
29分钟前
0
0
Makefile 学习 2 - 基于若干 Blog 的汇总

基于若干 Blog 汇总的 makefile 教程 陈皓 https://blog.csdn.net/haoel/article/details/2886 Makefile 进阶 1. Makefile 中的内容 显式规则。显式规则说明了,如何生成一个或多的的目标文件...

公孙衍
44分钟前
0
0
NIO与BIO的区别、NIO的运行原理和并发使用场景

NIO(Non-blocking I/O,在Java领域,也称为New I/O),是一种同步非阻塞的I/O模型,也是I/O多路复用的基础,已经被越来越多地应用到大型应用服务器,成为解决高并发与大量连接、I/O处理问题的...

Java干货分享
今天
1
0
72.告警系统邮件引擎 运行告警系统

20.23/20.24/20.25 告警系统邮件引擎 20.26 运行告警系统 20.23/20.24/20.25 告警系统邮件引擎 邮件首先要有一个mail.py,以下。 因为我们之前zabbix的时候做过,就可以直接拷贝过来 mail.s...

王鑫linux
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部