swiper在angularjs中使用循环轮播失效的解决方法


Posted in Javascript onSeptember 27, 2018

bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白。通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块,则允许滑动多少个块。 而在angular始终在swiper初始化之后定义,swiper则无法正确scan有多少个slide(实际上找到一个待循环模板),所以划不动。

我在网上搜了一点资料很多人都是通过添加两个属性就解决了,但我的还是不行,以下为插入的属性。

observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper12

我通过在link中初始化swiper中添加延时计时器,可以解决,尽管我延迟的时间设置为0,但是正常的效果出现了,我也不知道什么问题,如果有人知道可以解答一下。

以下为我的代码,html代码如下

<div class="swiper-slide" ng-repeat="item in arr">
 <img ng-src="img/{{item}}" alt="" />
</div>

指令中的代码如下

link:function(){
 setTimeout(function(){
 var swiper=new Swiper(".swiper3",{
 pagination: '.swiper-pagination3',
 paginationClickable: true,
 centeredSlides: true,
 autoplay: 2000,
 loop : true,
 autoplayDisableOnInteraction: false,

  });
 },0);
 }

以上这篇swiper在angularjs中使用循环轮播失效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
微信小程序实现评论功能
Nov 28 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 #Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 #Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 #Javascript
axios 封装上传文件的请求方法
Sep 26 #Javascript
axios取消请求的实践记录分享
Sep 26 #Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 #Javascript
在vue中获取token,并将token写进header的方法
Sep 26 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php 什么是PEAR?
2009/03/19 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python查看zip包中文件及大小的方法
2015/07/09 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python探索之ModelForm代码详解
2017/10/26 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
Django model class Meta原理解析
2020/11/14 Python
金讯Java笔试题目
2013/06/18 面试题
如何删除一个表里面的重复行
2013/07/13 面试题
医大实习自我鉴定
2013/12/07 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
销售工作岗位职责
2013/12/24 职场文书
工作目标责任书
2014/07/23 职场文书
面试自我评价范文
2014/09/17 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
支教个人总结
2015/03/04 职场文书
少先队工作总结2015
2015/05/13 职场文书
2016新年年会主持词
2015/07/06 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python