swiper 窗口宽度变化，页面宽度高度变化 导致自动滑动 解决方案

Posted 2021-01-13 huiziblog666

又又又又是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 容器的时候出了什么问题，向着这个方向去找一定有结果的。

 

转载注明出处，蟹蟹