javaScriptモバイルフィンガースライドイベント......

イベントバインディングと受信距離パラメータ

• 指のスライドイベントを指定された要素に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');
 }
 // パラメータのデフォルト値は、指が要素から離れると元に戻る。
 setStartX(-1)
 setEndX(-1)
 setDistance(0)
 }