同一页面多个swiper出现错乱问题
来源:互联网 发布:java线程对象锁 编辑:程序博客网 时间:2024/05/16 15:55
第一次使用swiper出现的各种奇葩问题,搞得头疼
1.同一页面存在多个swiper时,不能以通用的id或者class为定位标准,容易出现同时找到多个对象的问题,需要确保id和class的唯一性
2.动态创建swpier,append到html中时,swiper-slide必须放在swiper-wrapper中,否则初始化后,会因为结构不完整报错
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> </div></div>
3.动态创建swiper的slide页时,使用源生的swiper.appendSlide()代替replace(),执行效率更高,并且不容易出现错乱
项目案例:产线屏-电子展板与人员绩效多个tab来回切换时,电子展板初始化后,可以正常上下页切换刷新;从人员绩效切换回来的时候,出现无法下页切换,之能上页切换的问题,F12查看Elements发现swiper的结构发生变化,猜测由于replace()替换前后的清空,并未完全清空上一次加载的slide,导致多个slide重复,无法出现切换下页的情况
4.销毁swiper
if(window.swiper){ //销毁swiper window.swiper.destory(false);}
5.同一网页 多个tab,隐藏显示多个swiper出现的不同问题
例如:tab1:图片轮播mySwiper1
tab2:消息信息轮播mySwiper2
问题:多个swiper同时使用pagination(分页器的图标),swiper容易出现错乱
解决方案:定义类名唯一的pagination
var picObject = new Array();//存放图片地址的数组picObject.push('http://123.com/1.jpg');if(window.mySwiper1){ window.mySwiper1.destroy;}window.mySwiper1 = new swiper( '.swiper-container1',{ initialSlide:picOject.length>0?picObject.length+1:0, //initalSlide: swiper中设置初始化时的slide索引属性,默认是0当前swiper中包含多张图片,初始化之后显示在最后一个, //此时怀疑该属性是否未生效,在onSlideChangeEnd事件,打印出swiper.activeIndex发现activeIndex排序是乱的,并且不包含0, //在swiper中之放入一张图片 ,loop循环开启的情况下 ,查看activeIndex ,此时输出的activeIndex = 1, //重新放入多张图片,默认显示的最后一个分页器的activeIndex = 1, 第一张图片的activeIndex = picObject.length+1 , //想要初始化的时候默认显示第一页,设置如上属性 loop:true, autoplay:1000*2, //图片循环速率 autoplayDIsableOnInteraction:false, pagination:'.swiper-pagination-pic', paginationClickable:true, observer:true, observerParents:false,jiejue resistianceRatio:0, iOSEdgeSwipeDetection:true})window.mySwiper1.appendSlide(picObject);window.mySwiper1.update();window.mySwiper1.startAutoplay();
阅读全文
0 0
- 同一页面多个swiper出现错乱问题
- 关于同一页面多个swiper-container会出现swiper-pagenation总数多出的问题
- 同一页面引入多个JS文件的编码问题
- 同一页面引入多个JS文件的编码问题
- 同一页面引入多个JS文件的编码问题
- 页面在360浏览器出现样式错乱问题
- 解决多个fragment嵌套错乱问题
- 同一页面放置多个UpdatePanel
- 同一页面放置多个UpdatePanel
- js实现,同一页面多个倒计时
- js实现,同一页面多个倒计时
- Mysql编码出现错乱问题
- 解决windows server 同一账户远程登录出现多个桌面回话问题
- h5页面引用idangerous.swiper.js 插件兼容ios和android出现的问题
- 使用多fragment出现的错乱或不显示问题
- Dialog出现页面布局错乱解决方法
- Android原生webView加载h5页面出现加载错乱不完全问题
- 解决多个Fragment时,onContextItemSelected错乱的问题
- vue之计算属性
- Java三大器之拦截器(Interceptor)的实现原理及代码示例
- JSP入门知识点解析之九大内置对象
- Android:正则表达式-android固话(座机)的验证
- linux定时执行sh文件
- 同一页面多个swiper出现错乱问题
- mysql分库
- 面试题记录第十节——(okhttp、retrofit网络框架)
- Intelligent.Light.FieldView.v15.Linux64 1CD
- Jedis客户端操作redis缓存命令详解
- HTTPS 与 HTTP 介绍
- MYSQL修改root用户名
- eclipse如何导出WAR包
- android之recyclerView篇