纵向滚动导致轮播图异常

文章目录

纵向滚动导致轮播图异常
前言
一、解决过程
二、解决方案
一份代码模板
总结

前言

今天手机端页面,需求是做一个上滑翻页的效果,先写了一个demo,没有什么问题,用touchstart,touchmove和touchend解决了滑动翻页的问题,然后运行起来看着都还不错!

接着就开始下饭了,在照着demo的纵向轮播结构向里面添加了诸多页面内容后,页面出现了一种奇怪的切换动作:慢慢翻还好,只要翻快点不是翻多了看不全就是翻少了多出来一截.

一、解决过程

这个轮播图的原理是每次下翻动画结束之后将< ul>的bottom属性加或减一个innerHeight来进行位置修正.所以,在猜测每次翻页后< ul>的最终移动距离在此处不适用之后,就去调了一下每次翻动后修正的距离,发现虽然偶尔可以了但是大概70%的时候还是错位.
有点恼火…猛地一翻,结果轮播图直接从第一张翻到了最后一张,然后回跳到了第二张和第三张之间.

这是demo里没有出现的情况,它不应能一次翻出如此长的距离…

这页面滑动估计是默认行为,想到或许可以去尝试阻止默认行为.

二、解决方案

那就去阻止默认行为吧,最后倒也真的解决了.

需要对操控< ul>拖动的代码上做一些改动,要阻止拖动过程中默认行为的出现,那必然也要是在过程中做手脚,也就是"touchmove"时间触发阶段:

将代码从:

//"roll"就是整个<ul>;roll.addEventListener("touchmove", function (e) {nowPos = e.touches[0].clientY;})

改动为:

//"roll"就是整个<ul>;roll.addEventListener("touchmove", function (e) {nowPos = e.touches[0].clientY;e.preventDefault(); })

在鼠标拖动中每一刻都会执行这个事件监听函数,也就每一刻都会阻止默认行为.

啊…
就这样,加上就好了,没有什么特别绚丽的操作.

一份代码模板

原理就是用一个container来作为视口,然后在ul这个胶卷上贴上影像,不断地在container视口拖动

        var roll = document.querySelector("你的ul");var rollItem = document.getElementsByClassName("ul上的卡片们");var startPos = null;  //开始拖动处Y坐标var nowPos = null;    //结束拖动时的Y坐标var num = 0;          //页码计数,配合innerHeight修正最终位置var distance = null;  //纵向拖动最终位移;roll.addEventListener("touchstart", function (e) {startPos = e.touches[0].clientY;})roll.addEventListener("touchmove", function (e) {nowPos = e.touches[0].clientY;e.preventDefault();   //阻止拖动过程中的默认事件;})roll.addEventListener("touchend", function (e) {distance = nowPos - startPos;  //得出拖动方向;deal(distance);   //传参拖动方向给处理方法;})function deal(distance) {console.log(distance);  //检查是否接收成功;if (distance > 40) { //去敏感化;//判定:下翻;if (Math.abs(num) != 0) {num++;roll.style.animation = "switchUp 1s";  //下翻动画document.addEventListener("animationend", function () {  //animationend事件在该元素拥有的动画结束后被触发;roll.style.bottom = -innerHeight * num + 'px';  //翻页动画结束,修正页面位置;roll.style.animation = "defau";  //重置动画为无,以确保下次能正常执行动画;});}} else if (distance < -40) {  //去敏感化;//判定:上翻;if (Math.abs(num) != (rollItem.length + 1)) {num--;roll.style.animation = "switchDown 1s";roll.addEventListener("animationend", function () {  //animationend事件在该元素拥有的动画结束后被触发;roll.style.bottom = -innerHeight * num + 'px';  //翻页动画结束,修正页面位置;roll.style.animation = "defau";  //重置动画为无,以确保下次能正常执行动画;});}}}

总结

记一个小BUG,这还是第三次用 e.preventDefault() 方法,十分具有纪念意义 doge)

解决纵向滚屏导致的轮播图异常相关推荐

php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法: 这是一款jquery全屏响应式淡入淡出效果轮播图插件.该轮播图插件简单实用, ...
妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了
2019独角兽企业重金招聘Python工程师标准>>> 今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/ ...
轮播图动画滑动动画效果
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
小程序轮播图高度适配
小程序轮播图适配在开发小程序轮播图时,我遇到一下问题:小程序轮播图的导航栏总是不能放在正确的位置上,思考再三,我发现问题的原因是:当我们设置image的mode="widthFix&quo ...
Android三方框架banner实现轮播图
Android三方框架banner实现轮播图关于效果图第一步,添加引用第二步,新增实体类及测试数据第三步,添加banner实例控件,修改主界面代码自定义图片+标题轮播图效果图你以为到这 ...
安卓仿手机网易新闻app项目开发系列之（二）轮播图显示和RecyclerView适配器编写
一.项目简介和思路接着上周项目继续,上周主要实现了tablayout的标题栏界面和屏幕切换效果.这次咱们来实现给屏幕页面填充些网页图片数据.看看大致效果图: 可以看出界面有两部分构成,上面是轮播图, ...
解决layui轮播图满屏是高度自适应的问题
在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决.后来看到了layui插件的轮播图,就拿过来用了 ...
Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...
利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。
利用CSS的动画完成轮播图功能,切换图片时发现,在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊. 如下图: 轮播图切图时下面的内容:"办公家具"."更多&qu ...

解决纵向滚屏导致的轮播图异常