イベントバインディングと受信距離パラメータ
- 指のスライドイベントを指定された要素に3段階バインドし、トランスフォームのtranslateプロパティを使用して、スライドの方向または距離に応じて要素を移動します。
<div
onTouchStart={(e) => touchStart(e)}
onTouchMove={(e) => touchMove(e)}
onTouchEnd={(e) => touchEnd(e)} style={{ transform: `translateX(${distance}px)` }}>
スライドさせる要素
</div>
// 指の接触位置を記録する
const [startX, setStartX] = useState(-1)
// 指の位置を記録する
const [endX, setEndX] = useState(-1)
// 指の移動距離を記録する
const [distance, setDistance] = useState(0)
// 指が画面に触れる
const touchStart = (e: any) => {
setStartX(e.touches[0].clientX)
}
//指のスライドを開始する
const touchMove = (e: any) => {
setEndX(e.touches[0].clientX)
// スライドさせる要素の移動距離
let distance = (endX != -1) ? (-(startX - endX)) : 0;
// 移動距離は40
Math.abs(distance) > 40 ? (setDistance(distance <= 0 ? -40 : 40)) : setDistance(distance)
}
// スクリーンから指を離す
const touchEnd = (e: any) => {
// 移動距離が40より大きく、クリックが除外される場合
if (endX != -1 && Math.abs(startX - endX) > 40) {
endX > startX ? console.log('left') : console.log('right');
}
// Finger offはパラメータのデフォルト値を復元する。
setStartX(-1)
setEndX(-1)
setDistance(0)
}