判断手机屏幕上的横向滑动（左滑和右滑）

在JavaScript中，你可以通过监听触摸事件（touch events）来判断用户在手机屏幕上的横向滑动方向。以下是实现方法：

基本实现方案

let touchStartX = 0;
let touchEndX = 0;

function handleTouchStart(event) {
touchStartX = event.changedTouches[0].screenX;
}

function handleTouchEnd(event) {
touchEndX = event.changedTouches[0].screenX;
handleSwipe();
}

function handleSwipe() {
const threshold = 50; // 最小滑动距离阈值
const diffX = touchEndX – touchStartX;

if (Math.abs(diffX) > threshold) {
if (diffX > 0) {
console.log("向右滑动");
// 执行右滑操作
} else {
console.log("向左滑动");
// 执行左滑操作
}
}
}

// 添加事件监听
const element = document.getElementById('swipe-area');
element.addEventListener('touchstart', handleTouchStart, false);
element.addEventListener('touchend', handleTouchEnd, false);

更完善的实现（包含滑动速度检测）

let touchStartX = 0;
let touchStartTime = 0;

const element = document.getElementById('swipe-area');

element.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
touchStartTime = Date.now();
}, false);

element.addEventListener('touchmove', (e) => {
e.preventDefault(); // 阻止默认行为，避免页面滚动
}, { passive: false });

element.addEventListener('touchend', (e) => {
const touchEndX = e.changedTouches[0].clientX;
const touchEndTime = Date.now();

const diffX = touchEndX – touchStartX;
const duration = touchEndTime – touchStartTime;
const velocity = Math.abs(diffX) / duration; // 计算滑动速度

const threshold = 50; // 最小滑动距离
const minVelocity = 0.3; // 最小滑动速度(像素/毫秒)

if (Math.abs(diffX) > threshold && velocity > minVelocity) {
if (diffX > 0) {
console.log("向右滑动");
// 执行右滑操作
} else {
console.log("向左滑动");
// 执行左滑操作
}
}
}, false);

React 组件实现示例

import React, { useRef } from 'react';

const SwipeDetector = () => {
const touchStartX = useRef(0);
const touchStartTime = useRef(0);

const handleTouchStart = (e) => {
touchStartX.current = e.touches[0].clientX;
touchStartTime.current = Date.now();
};

const handleTouchEnd = (e) => {
const touchEndX = e.changedTouches[0].clientX;
const touchEndTime = Date.now();

const diffX = touchEndX – touchStartX.current;
const duration = touchEndTime – touchStartTime.current;
const velocity = Math.abs(diffX) / duration;

const threshold = 50;
const minVelocity = 0.3;

if (Math.abs(diffX) > threshold && velocity > minVelocity) {
if (diffX > 0) {
console.log("向右滑动");
// 执行右滑操作
} else {
console.log("向左滑动");
// 执行左滑操作
}
}
};

return (
<div
style={{ width: '100%', height: '200px', backgroundColor: '#eee' }}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
>
在此区域滑动
</div>
);
};

export default SwipeDetector;

注意事项

进阶优化

<!– 使用Hammer.js示例 –>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
<script>
const element = document.getElementById('swipe-area');
const hammer = new Hammer(element);

hammer.on('swipeleft', () => console.log('向左滑动'));
hammer.on('swiperight', () => console.log('向右滑动'));
</script>