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 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
JavaScript判断数组类型的方法
Oct 23 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中英混合字符串截取函数代码
2011/07/17 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
JavaScript 指导方针
2007/04/05 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
Python用GET方法上传文件
2015/03/10 Python
python数组过滤实现方法
2015/07/27 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
介绍一下EJB的体系结构
2012/08/01 面试题
运动会开幕式解说词
2014/02/05 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
公司员工活动策划方案
2014/08/20 职场文书
给校长的一封检讨书
2014/09/20 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技