前言
在移动端，当我们的页面同时上下左右滑动时，比如我们在顶部有一个轮播图片（左右移动），同时页面还包含一个上下移动的滚动条。 当我们倾斜滑动页面时，页面也会倾斜移动，即触发左右移动事件和触发上下移动事件。 布局也可能是无序的，这不是我们想要的，我们只是想让它左右滑动或者上下滑动，而不是同时滑动。接下来我们来解决这个问题
1. 触摸事件介绍 2. 对象
每个触摸事件的触发都会生成一个对象。 以下是常用的对象的三个重要属性
wrap.addEventListener("touchstart", (e) => {
console.log(e)
})3. 对象属性
每个 Touch 对象包含以下属性
四、js解决移动端滑动问题（幻灯片案例）
解决方案：监控滑动，预测用户是向左滑动还是向右滑动，还是上下滑动，如果水平移动距离>垂直移动距离，则为水平滑动，否则为垂直滑动，然后解决滑动问题通过防止默认事件
ta charset="UTF-8">
ta name="viewport" content="width=device-width, initial-scale=1.0">
ta http-equiv="X-UA-Compatible" content="ie=edge">
docu<i></i>ment
html {
font-size: 10vw;
}
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrap {
position: relative;
width: 100vw;
overflow: hidden;
}
#list {
float: left;
display: flex;
display: -webkit-box;
}
#list li {
flex: none;
width: 100vw;
}
#list img {
width: 100%;
height: 200px;
display: block;
}
.nav {
position: absolute;
left: 0;
bottom: .2rem;
width: 100%;
text-align: center;
vertical-align: top;
}
.nav a {
display: inline-block;
width: .3rem;
height: .3rem;
background: #fff;
margin: 0 .1rem;
border-radius: .15rem;
transition: .3s;
}
.nav .active {
width: .6rem;
color: #fff;
}
.textList {
margin: 0;
padding: 0;
list-style: none;
}
.textList li {
font: 14px/40px "宋体";
padding-left: 20px;
border-bottom: 1px solid #000;
}
cript>
// 生成两百行测试数据列表
{
let list = document.querySelector(".textList");
list.innerHTML = [...(".".repeat(200))].map((item, index) => {
return `这是第${index}行测试数据 `;
}).join("");
}
// 幻灯片
{
let wrap = document.querySelector("#wrap");
let list = document.querySelector("#list");
let navs = document.querySelectorAll(".nav a");
let startPoint = {};
let translateX = 0;
let startTranslateX = 0;
let now = 0;
let wrapW = wrap.clientWidth;
const range = .3 * wrapW;
let isFirst = true;
let isMove = true;
list.innerHTML += list.innerHTML;
// 当手指触摸屏幕时触发
wrap.addEventListener("touchstart", (e) => {
let touch = e.changedTouches[0];
list.style.transition = "none";
startPoint = {
x: touch.pageX,
y: touch.pageY
};
if (now == 0) {
now = navs.length;
} else if (now == navs.length * 2 - 1) {
now = navs.length - 1;
}
translateX = -now * wrapW;
list.style.transform = `translateX(${translateX}px)`;
startTranslateX = translateX;
isFirst = true;
isMove = true;
});
// 当手指在屏幕上滑动时连续地触发
wrap.addEventListener("touchmove", (e) => {
let touch = e.changedTouches[0];
let nowPoint = {
x: touch.pageX,
y: touch.pageY
};
let dis = {
x: nowPoint.x - startPoint.x,
y: nowPoint.y - startPoint.y
};
// 在安卓下，手指按下时，如果触摸面积比较大，容易误触 touchmove
if (isFirst) {
if (Math.abs(dis.x) - Math.abs(dis.y) > 5) {
// 左右滑动, 阻止滚动条不进行上下滑动，而让幻灯片滑动
isMove = true;
isFirst = false;
} else if (Math.abs(dis.y) - Math.abs(dis.x) > 5) {
// 上下滑动, 不阻止滚动条滑动，禁止幻灯片滑动
isMove = false;
isFirst = false;
}
}
if (isMove) {
e.preventDefault();
if (!isFirst) {
translateX = startTranslateX + dis.x;
list.style.transform = `translateX(${translateX}px)`;
}
}
});
// 当手指从屏幕上离开时触发
wrap.addEventListener("touchend", (e) => {
let touch = e.changedTouches[0];
let nowPoint = {
x: touch.pageX,
y: touch.pageY
};
let dis = {
x: nowPoint.x - startPoint.x,
y: nowPoint.y - startPoint.y
};
if (Math.abs(dis.x) > range && isMove) {
now -= dis.x / Math.abs(dis.x);
}
navs.forEach(item => {
item.classList.remove("active")
});
translateX = -now * wrapW;
list.style.transition = ".3s";
list.style.transform = `translateX(${translateX}px)`;
navs[now % navs.length].classList.add("active");
});
}
cript>
五、效果图
6.移动端滚动插件
:
-:#/zh
文章每周更新。 您可以微信搜索“前端合集”第一时间阅读。 回复【视频】【书籍】即可领取200G视频资料和30本PDF书籍资料
