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

Posted huiziblog666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper 窗口宽度变化,页面宽度高度变化 导致自动滑动 解决方案相关的知识,希望对你有一定的参考价值。

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

 

转载注明出处,蟹蟹

 




以上是关于swiper 窗口宽度变化,页面宽度高度变化 导致自动滑动 解决方案的主要内容,如果未能解决你的问题,请参考以下文章

jQuery - 检测窗口宽度变化但不检测高度变化

jQuery位置,仅在窗口宽度发生变化时重新加载

vue监听页面宽度高度

手动调整窗口大小后,QGraphicsScene 宽度/高度没有变化

html 高度怎么根据宽度的变化而变化?

随着窗口大小的变化,如何在wpf中动态测量网格宽度/高度