又又又又是swiper问题
背景:
pc端项目,rem布局,swiper作为步骤条(上一步,下一步)的功能。
发现在屏幕拖动,宽高的变化,窗口大小的变化 会引起swiper自动滑动(到下一步)。
在下载文件链接时候回轻微引起一点点宽高的变化,导致直接滑到下一步。
Chrome浏览关闭底部下载内容时候也会导致滑动
思考:
1.刚开始以为是某个地方不小心多加了下一步的操作,一直在查找
2.然后以为是下载的方法导致的,更换了多种下载方案
3.实在没有找出,准备debugger的时候发现,屏幕变化也会引起滑动,准备查找相关内容
行动:
但是无奈swiper的中文api太多不想一个一个的查找,直接搜索,筛选出以下可能有戏的内容↓
//博客链接:https://blog.csdn.net/gengsm2/article/details/43193785 //重点:通过调用swiper.resizeFix()方法,通知swiper需要重新计算页面尺寸。
//博客链接:https://blog.csdn.net/u012217533/article/details/46335075?utm_source=copy //重点:mySwiper.destroy(removeResizeEvent) -移除所有绑定的事件监听(窗口的尺寸改变事件【如果removeResizeEvent的值不等于“false”】,容器(wrapper)的触控事件,以及文档的鼠标事件),对于添加/移除滑块,页面到文档时非常有用,能够释放浏览器内存。
结果:
到我正准备尝试resize()方式的时候,发现原来我在开始的时候就设置过,每次在初始化的时候都要翻到下一页!啊啊啊啊,不能图省事直接复制demo里的代码呀~
1 var mySwiper = $(‘.swiper-container‘).swiper({ 2 loop: false, 3 simulateTouch : false,//鼠标无效 4 followFinger : false,//拖动后释放鼠标或手指时slide滑动 5 keyboardControl : false,//设置为true时,能使用键盘方向键控制slide滑动。 6 touchMoveStopPropagation : false,//阻止当和iscoll插件一起时的a标签跳转的冒泡事件 7 observer:true,//修改swiper自己或子元素时,自动初始化swiper 8 observeParents:true,//修改swiper的父元素时,自动初始化swiper 9 onInit: function(swiper){ 10 // swiper.swipeNext()//就是这里!!!!每次init,重绘的时候都会跳转到下一页 11 } 12 });
结论:
但是万变不离其宗,如果有类型情况,排除多写的跳转下一步的方法,那么肯定是在重绘,重新init swiper 容器的时候出了什么问题,向着这个方向去找一定有结果的。
转载注明出处,蟹蟹
原文地址:https://www.cnblogs.com/huiziblog666/p/9797836.html
时间: 2024-11-07 04:15:46