三种事件:onTouchStart,onTouchMove, onTouchEnd。
handleStart = (e) => {
e.preventDefault();
this.setState({
startX : e.targetTouches[0].clientX,
startY : e.targetTouches[0].clientY,
x:0,
y:0,
});
}
handleTouchMove = (e) => {
const { startX, startY, width, height } = this.state;//取得初始坐标和屏幕可视宽高
this.setState({
///都可以来设置实时变化的值,不用用到changedTouches;
x: e.touches[0].clientX - startX, //当前触摸点-初始坐标取得实时变化值
y: e.touches[0].clientY - startY,
});
}
handleTouchEnd = (e) => {
let xCur = this.state.x;
let width = window.screen.availWidth;
let curIndex = this.state.index;
if(xCur > width/5 && curIndex !== 0){
curIndex -- ;
$(".sliders").css("left",-curIndex*7.5+"rem")
this.setState({
index: curIndex
})
console.log(curIndex)
}else if(xCur < -width/5 && curIndex !== 2){
curIndex ++ ;
$(".sliders").css("left",-curIndex*7.5+"rem")
this.setState({
index: curIndex
})
console.log(curIndex)
}
}