又又又又是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. CGAffineTransform

    这个是CoreGraphics框架中的CGAffineTransform类,可用于设定UIView的transform属性.控制视图的缩放.旋转和平移操作.另称仿射变换矩阵. Quartz转换实现原理 ...

  2. 了解screen对象的常用视图属性

    前面的话 screen对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素高度和宽度等.每个浏览器中的screen对象都包含着各不相同的属性.本文将详细介绍screen对象的 ...

  3. 使用 python 实现 memcached 的启动服务脚本 rc

    #!/usr/bin/python #coding:utf-8 import sys import os from subprocess import Popen, PIPE class Memcac ...

  4. [LeetCode] Range Sum Query - Immutable &amp; Range Sum Query 2D - Immutable

    Range Sum Query - Immutable Given an integer array nums, find the sum of the elements between indice ...

  5. Windows下gvim的快捷键--“冒号+w+回车”真的很累人

    发现Windows下的gvim支持Ctrl+S保存,Ctrl+A全选,Ctrl+C复制,Ctrl+V粘贴,Ctrl+Z撤销 不过Ctrl+X貌似不太正常(可以剪切,但是不能粘贴) 可能要在安装目录下的 ...

  6. SRM475 - SRM479(1-250pt,500pt)

    SRM 475 DIV1 300pt 题意:玩游戏.给一个棋盘,它有1×n(1行n列,每列标号分别为0,1,2..n-1)的格子,每个格子里面可以放一个棋子,并且给定一个只含三个字母WBR,长度为n的 ...

  7. 5分钟教你学会JavaScript正则表达式

    正则表达式在实际开发过程中和技术面试过程中的重要性不言而喻,本文仅仅只是教你如何在几分钟之类学会正则表达式,对于它的原理及运行机制不做介绍. 第一:什么是正则 正则表达式是一种用来描述一定数量文本的模 ...

  8. CDIF: 基于JSON的SOA软件框架

    通用设备互联框架(CDIF)是一个具备中美知识产权保护的,基于web的连接框架,目前有部分开源实现存放在: GitHub - out4b/cdif: Common device interconnec ...

  9. 创建并发布npm包

    1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm np ...

  10. volume 方式使用 Secret - 每天5分钟玩转 Docker 容器技术（157）

    Pod 可以通过 Volume 或者环境变量的方式使用 Secret,今天先学习 Volume 方式. Pod 的配置文件如下所示: ① 定义 volume foo,来源为 secret mysecr ...