App 上/下/左/右 滑动判断

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 }}
>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值