<View style={num === 1 ? 'background:red' : ''} className={styles.app} onTouchStart={(enevt) => {
moveStart(enevt)
}} onTouchMove={(enevt) => {
move(enevt)
}} onTouchEnd={(enevt) => {
moveEnd(enevt)
}}>
</View>
const [start, setStart] = React.useState()
const [end, setEnd] = React.useState()
const [number, setNumber] = React.useState(0)
let numNO = 0
const moveStart = (e) => {
setStart(e.touches[0].pageX)
timer.current = setInterval(() => {
numNO++
setNumber(numNO)
console.log(numNO);
}, 100)
}
const move = (e) => {
setEnd(e.changedTouches[0].pageX)
if (start - end <= -40 && number < 10) {
console.log('向右')
}
else if (start - end >= 40 && number < 10) {
console.log('向左')
}
}
const moveEnd = (e) => {
console.log(start, end);
clearInterval(timer.current);
}
原生链接https://blog.csdn.net/crazytea/article/details/53228755