又又又又是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里的代码呀~

 var mySwiper = $('.swiper-container').swiper({
loop: false,
simulateTouch : false,//鼠标无效
followFinger : false,//拖动后释放鼠标或手指时slide滑动
keyboardControl : false,//设置为true时,能使用键盘方向键控制slide滑动。
touchMoveStopPropagation : false,//阻止当和iscoll插件一起时的a标签跳转的冒泡事件
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
onInit: function(swiper){
// swiper.swipeNext()//就是这里!!!!每次init,重绘的时候都会跳转到下一页
}
});

结论:

但是万变不离其宗,如果有类型情况,排除多写的跳转下一步的方法,那么肯定是在重绘,重新init swiper 容器的时候出了什么问题,向着这个方向去找一定有结果的。

转载注明出处,蟹蟹

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

  1. iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)

    最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...

  2. Iframe 自适应高度并实时监控高度变化的js代码

    不得不用到iframe,且被强烈要求不能让它出现滚动条!嵌入的页面肯定是高度不一的,页面中也不能出现大片空白,所以也不能写死高度!真是麻鬼烦啊!google N次 + 百度M次 + 试验了1605次之 ...

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

    怎么批量修改Word表格的宽度呢.Word表格可根据窗口自动调整表格宽度,使得所有的表格宽度和页面宽度一样. 当页面设置了新的页边距后,所有的表格都需要调整新的宽度.或者文档中有许多大大小小的表格,希 ...

  4. table 设置自动宽度后 td 的固定宽度 在 谷歌浏览器自动拉伸

    table   设置自动宽度后   td 的固定宽度  在 谷歌浏览器自动拉伸 解决方案 <table style="table-layout:fixed;">

  5. js各种获取当前窗口页面宽度、高度的方法

    alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...

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

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

  7. Html_页面的高度宽度等

    offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像 ...

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

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

  9. javascript 页面各种高度宽度

    http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. 图片 IE中: document.body.clientWidth == ...

随机推荐

  1. java中的那些坑

    最近准备换工作,为了少让人家鄙视,就要狠狠地藐视这些面试题目.找了本电子书,发了有好多坑,都是特别简单,但是很少有人做对的题目.面对这样的题目,我却有一种兴奋的感觉,也许是因为一直做着重复的工作没有新 ...

  2. Shi-Tomasi角点检测

    代码示例: #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #inc ...

  3. NodeJS从零开始——NPM的使用

    NPM是一个Node包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准.有了NPM,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. NPM常用的命令有: (1)$ ...

  4. 沈逸老师PHP魔鬼特训笔记(2)

    一.这一课会学习到几个懒人函数: 1.file_put_contents (PHP 5, PHP 7) file_put_contents — 将一个字符串写入文件 说明 int file_put_c ...

  5. js构造函数

    使用函数做自动化 function createObj(nick, age){ var obj = { nick: nick, age: age, printName: function(){ con ...

  6. mac 中登陆mysql忘记密码解决办法

    1.打开终端,输入命令:cd /usr/local/mysql/bin 2.mysql -uroot -p,用这条命令登陆时报错信息: 报错:Enter password: ERROR 1045 (2 ...

  7. IntelliJ IDEA 导航的 20 大特性

    本文由 ImportNew - elviskang 翻译自 dzone.欢迎加入翻译小组.转载请见文末要求. 在前面的文章里,我介绍了IntelliJ IDEA(以下称IntelliJ)中与代码补全及 ...

  8. 微服务之consul

    一.概述 consul是google开源的一个使用go语言开发的服务发现.配置管理中心服务.内置了服务注册与发现框 架.分布一致性协议实现.健康检查.Key/Value存储.多数据中心方案,不再需要依 ...

  9. OpenJS Foundation

    OpenJS Foundation Introducing the OpenJS Foundation https://openjsf.org/ The Node.js Foundation and ...

  10. 20145318《网络对抗》MSF基础应用

    20145318 <网络对抗> MSF基础应用 实验内容 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路.具体需要完成(1)一个主动攻击,如ms08_067;(2)一 ...