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

转载注明出处,蟹蟹

原文地址:https://www.cnblogs.com/huiziblog666/p/9797836.html

时间: 2024-11-07 04:15:46

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

Word批量设置表格宽度自动适应页面宽度

怎么批量修改Word表格的宽度呢.Word表格可根据窗口自动调整表格宽度,使得所有的表格宽度和页面宽度一样. 当页面设置了新的页边距后,所有的表格都需要调整新的宽度.或者文档中有许多大大小小的表格,希望宽度全部调整与页宽一样.下面的方法就非常有用啦 步骤阅读 百度经验:jingyan.baidu.com 工具/原料 Word 2013 百度经验:jingyan.baidu.com 方法/步骤 1 打开Word文档,按下[Alt + F11] 步骤阅读 2 在VBA编辑器窗口的左上方,双击[Thi

javascript 获取滚动条高度+常用js页面宽度与高度

javascript 获取滚动条高度+常用js页面宽度与高度 js(1)  /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    if(document.documentElement&&document.documentElement.scrollTop)    {        scrollTop=document.documentElem

Html_页面的高度宽度等

offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像素. offsetHeight 指元素控件自身的高度,整型,单位像素. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页

javascript 获取滚动条高度+常用js页面宽度与高度(转)

/******************** *获取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=d

页面的高度宽度等

offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像素. offsetHeight 指元素控件自身的高度,整型,单位像素. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页

JS 获取滚动条高度+常用js页面宽度与高度

/******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    if(document.documentElement&&document.documentElement.scrollTop)    {        scrollTop=document.documentElement.scrollTop;    }    else if(documen

HTML 获取屏幕、浏览器、页面的高度宽度

本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可用以及任务栏的高度和宽度. 3. 浏览器信息:介绍浏览器尺寸信息:如:浏览器.内部页面以及工具栏的高度和宽度. 4. 页面信息:介绍HTML页面尺寸信息:如:body总的.展示的高度和宽度. 一.介绍 1. 容器 一个页面的展示,从外到内的容器为:屏幕.浏览器以及页面本身. HTML元素展现在页面内

[转] HTML 获取屏幕、浏览器、页面的高度宽度

本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可用以及任务栏的高度和宽度. 3. 浏览器信息:介绍浏览器尺寸信息:如:浏览器.内部页面以及工具栏的高度和宽度. 4. 页面信息:介绍HTML页面尺寸信息:如:body总的.展示的高度和宽度. 一.介绍 1. 容器 一个页面的展示,从外到内的容器为:屏幕.浏览器以及页面本身. HTML元素展现在页面内

javascript 获取当前页面可视高度和宽度的函数

    function getPageSize(){         var xScroll,yScroll;         if (window.innerHeight && window.scrollMaxY){             xScroll = window.innerWidth + window.scrollMaxX;             yScroll = window.innerHeight + window.scrollMaxY;         }