一，现象
顶部有轮播图(左右移动)，页面还包含上下移动滚动条。当我们斜滑页面，页面也会斜着运动，即触发了左右移动事件又触发了上下移动事件。
二，解决方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style>
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; } </style> </head> <body> <div id="wrap"> <!-- 幻灯片 --> <ul id="list"> <li><img src="https://i02piccdn.sogoucdn.com/f8773bf41fc728d8" alt=""></li> <li><img src="https://i02piccdn.sogoucdn.com/03469effa8" alt=""></li> <li><img src="https://i02piccdn.sogoucdn.com/b8322a9d8751fd62" alt=""></li> <li><img src="https://i04piccdn.sogoucdn.com/87a97031f6954b64" alt=""></li> <li><img src="https://i03piccdn.sogoucdn.com/d1eef212d4b16e56" alt=""></li> </ul> <!-- 点 --> <nav class="nav"> <a class="active"></a> <a></a> <a></a> <a></a> <a></a> </nav> </div> <!-- 测试数据列表 --> <ul class="textList"></ul> <script> // 生成两百行测试数据列表 {
let list = document.querySelector(".textList"); list.innerHTML = [...(".".repeat(200))].map((item, index) => {
return `<li>这是第${
index}行测试数据</li>`; }).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"); }); } </script> </body> </html> 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/11007.html