又又又又是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. PAT_A1131#Subway Map

    Source: PAT A1131 Subway Map (30 分) Description: In the big cities, the subway systems always look s ...

  2. Linux NIO 系列(04-3) epoll

    目录 一.why epoll 1.1 select 模型的缺点 1.2 epoll 模型优点 二.epoll API 2.1 epoll_create 2.2 epoll_ctl 2.3 epoll_ ...

  3. qs.parse()、qs.stringify()使用方法, 以及在axios 中怎么用?

    最近一直被纠结于传输格式,就在这里整理一下吧. qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.   (axios 自带qs , // import qs from ' ...

  4. 解决code first Migration 增加外键时出现错误的问题

    先上模型 Comment public class Comment { [Key] public int CommentId { get; set; } [Required] public int S ...

  5. MHA-Atlas-MySQL高可用(下)

    MHA-Atlas-MySQL高可用(下) 链接:https://pan.baidu.com/s/17Av92KQnJ81Gc0EmxSO7gA 提取码:a8mq 复制这段内容后打开百度网盘手机App ...

  6. 解决vcenter 6.0 vcsa安装插件第二个的时候报错的问题

    解决vcenter 6.0 vcsa安装插件第二个的时候报错的问题 需要打一下windows 的Microsoft v C++ 2013的2个补丁就可以正常运行了. 然后在后续安装过程中,到达最后一步 ...

  7. C#多线程的应用

    1.进程 就像我们任务管理器里面运行的进程 进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.一个正在运行的应用程序在操作系统中被视为一个进程,进程可以包括 ...

  8. 查看crontab执行记录

    如果出现了crontab定时任务不执行的情况,首先需要定位问题,那么就需要通过日志来确定问题所在. crontab的日志位置一般位于/var/log/cron,利用下面的语句即可查看日志. tail ...

  9. 【BZOJ5093】图的价值

    题面 Description "简单无向图"是指无重边.无自环的无向图(不一定连通). 一个带标号的图的价值定义为每个点度数的k次方的和. 给定n和k,请计算所有n个点的带标号的简 ...

  10. 【leetcode】538. Convert BST to Greater Tree

    题目如下: Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the orig ...