• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs swiper,swiper使用方法,angularjs 方法,angularjs run方法,angularjs等相关知识,希望在学习及工作中可以帮助到您

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

以上所述是小编给大家介绍的AngularJS 中使用Swiper制作滚动图不能滑动的解决方法,希望对大家有所帮助,如果大家有

任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>

您可能想查找下面的文章:

  • AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

相关文章

  • 2017-05-30AngularJS 中文API参考手册
  • 2017-05-30Angular在一个页面中使用两个ng-app的方法(二)
  • 2017-05-30AngularJS入门心得之directive和controller通信过程
  • 2017-05-30全面解析Angular中$Apply()及$Digest()的区别
  • 2017-05-30AngularJS 模块化详解及实例代码
  • 2017-05-30AngularJS Select(选择框)使用详解
  • 2017-05-30详解angular中通过$location获取路径(参数)的写法
  • 2017-05-30Angularjs 实现一个幻灯片示例代码
  • 2017-05-30AngularJS实现Input格式化的方法
  • 2017-05-30AngularJS中的Directive自定义一个表格

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Angularjs 动态添加指令并绑定事件的方法
    • Angularjs全局变量被作用域监听的正确姿势
    • Angular2学习笔记——详解路由器模型(Router)
    • AngularJS使用ngMessages进行表单验证
    • 举例讲解AngularJS中的模块
    • ionic AngularJS 生成二维码 扫描识别二维码
    • AngularJS表单提交实例详解
    • AngularJS中指令的四种基本形式实例分析
    • Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
    • AngularJS Toaster使用详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有