function touchEnd(e) {
console.log(‘触摸结束’);
const deltaX = e.changedTouches[0].clientX - touchStartX;
const deltaY = e.changedTouches[0].clientY - touchStartY;
if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX >= 0) {
console.log(‘左滑’);
} else {
console.log(‘右滑’);
}
} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
if (deltaY < 0) {
console.log(‘上滑’);
} else {
console.log(‘下滑’);
}
} else {
console.log(‘可能是误触!’);
}
}
function touchStart(e) {
console.log(‘触摸开始’);
setTouchStartX(e.touches[0].clientX);
setTouchStartX(e.touches[0].clientY);
const tStartX = e.touches[0].clientX;
const tStartY = e.touches[0].clientY;
}
<View className={styles.welcome} onTouchStart={touchStart} onTouchEnd={touchEnd}>
APP 页面上滑
function scrollTouchStart(e) {
setTouchStartX(e.touches[0].clientX);
setTouchStartY(e.touches[0].pageY);
}
function scrollTouchMove(e) {
const py = e.touches[0].pageY;
setTouchEndy(py);
if (py - touchStartY < 100 && py - touchStartY > -100) {
setMarginTop(py - touchStartY);
}
}
function scrollTouchEnd(e) {
const deltaY = e.changedTouches[0].pageY - touchStartY;
if (Math.abs(deltaY) > 50 && scrollIndex < 1 && deltaY < 0) {
setScrollIndex(1);
setEars(true);
}
setMarginTop(0);
setTouchStartY(0);
}
<View
className={styles.scrollFullpage}
onTouchStart={scrollTouchStart}
onTouchMove={scrollTouchMove}
onTouchEnd={scrollTouchEnd}
style={{ transform: translateY(-${scrollIndex * 100 }%)
, marginTop: ${marginTop}rpx
}}
>