AngularJS 中使用Swiper制作滚动图不能滑动的解决方法_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>

在测试时发现,手动复制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制作滚动图不能滑动的解决方法,希望对大家有所帮助,如果大家有

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angularjs
, swiper
swiper插件
angularjs 调用swiper、angularjs swiper插件、angularjs swiper、angularjs swiper.js、swiper 禁止滑动,以便于您获取更多的相关知识。

时间: 2016-11-15

AngularJS 中使用Swiper制作滚动图不能滑动的解决方法_AngularJS的相关文章

后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法_AngularJS

1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

详解AngularJS中$http缓存以及处理多个$http请求的方法_AngularJS

$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. 1.处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.

AngularJS在IE下取数据总是缓存问题的解决方法_AngularJS

本文实例讲述了AngularJS在IE下取数据总是缓存问题解决方法.分享给大家供大家参考,具体如下: 问题: 在使用AngularJS发出请求(GET)获取服务端数据,然后再绑定到页面中,你会发现在IE中总是显示原来的数据结果.这时候我们就会知道,IE做了缓存. 解决办法: 我们可以在AngularJS的配置中通过$httpProvider来设置其不缓存.具体如下所示: ngApp.config(function ($httpProvider) { // Initialize get if no

sql2000备份的数据库还原到sql2005后,选择“数据库关系图”提示:此数据库没有有效所有者,因此无法安装数据库关系图支持对象的解决方法

sql2005|备份|对象|解决|数据|数据库  sql2000备份的数据库还原到sql2005后,选择"数据库关系图"提示:此数据库没有有效所有者,因此无法安装数据库关系图支持对象.若要继续,请首先使用"数据库属性"对话框的"文件"页或  ALTER  AUTHORIZATION  语句将数据库所有者设置为有效登录名,然后再添加数据库关系图支持对象.       解决方法如下: 1.设置兼容级别为90(2005为90)  USE  [maste

C#中label内容显示不全、不完整的解决方法

  这篇文章主要介绍了C#中label内容显示不全.不完整的解决方法,只需要把两个属性设置一下即可解决这个问题,需要的朋友可以参考下 c# label的内容显示不全,需要设置如下属性即可: 1.将Lable的font属性的字体改成宋体; 2.将AutoSize属性改成true;

Win8.1安装iTunes软件提示“安装过程中出错,您的系统未被修改”解决方法

Win8.1安装iTunes软件提示"安装过程中出错,您的系统未被修改"解决方法   解决方法:出现这个错误是由于在win8.1中有一个"Devic Intall Service"服务没有启动引起的,只要我们正常启动他就可以了. 操作方法: 1.按下WIN+R键,然后输入 services.msc 回车; 2.在服务列表中找到"Devic Intall Service"服务;xitongcheng.com 3.双击该服务,在配置中点击"

win7系统中玩梦幻西游总是一卡一卡的解决方法

win7系统中玩梦幻西游总是一卡一卡的解决方法   故障原因: 1.显卡驱动. 2.梦幻锦衣系统的垃圾代码解决方式. 3.硬盘IO和显卡. 解决方法: 1.放弃360,或者每次上游戏之前都refresh2.0一次; 2.根据技术牛人的方法,删除梦幻西游根目录下v3d_cache文件夹中的所有文件.[这个要求每次登录游戏前都删除]. 我的解决办法是: 1.删除梦幻西游根目录下v3d_cache文件夹中v3d.dat; 2.右击新建文本文档,重命名为v3d.dat[这里注意后缀扩展名也要更改,如果你

Windows7中U盘无法停止通用卷的原因跟解决方法

在使用U盘过程中,遇到最郁闷的问题就是使用完U盘要安全移除U盘的时候弹出"无法停止通用卷".很多时候弹出这个我们基本上就不关它了,直接把U盘拔出来了.但是如果有一次你直接这样拔出U盘,然后下次使用U盘的时候你发现数据丢失了(虽然这个概率不高我也就遇到一次),我丢失的那一次让我有哭的冲动.所以以后我要把出U盘如果弹出"无法停止通用卷",我甘愿等到我电脑不用了.关机完我再拔出U盘,也不敢直接移除了.而这篇文章是跟大家分享下我个人总结的U盘无法停止通用卷的原因跟解决方法

电脑中无法启动Network List Service服务项的解决方法

  电脑中无法启动Network List Service服务项的解决方法 1.按组合键win+r打开运行,输入dcomcnfg并回车; 2.打开组件服务后,依次展开"组件服务→计算机→我的电脑→dcom配置",找到netprofm; 3.右击netprofm,打开属性; 4.切换到安全选项卡,在"启动和激活权限"中选择"自定义",并点击"编辑"按钮; 5.点击"添加"按钮; 6.输入对象名称"L