javaScript 移动端手指滑动事件......

事件绑定以及传入距离参数

• 给指定元素绑定手指滑动三个阶段（touchStart,touchMove,touchEnd）的事件，使用transform的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)
  }