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

2018/10/16 14:29
阅读数 64

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

 

转载注明出处,蟹蟹

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部