react中swipe怎么用

# React中Swipe怎么用

## 目录
1. [什么是Swipe手势](#什么是swipe手势)
2. [React中实现Swipe的常见方案](#react中实现swipe的常见方案)
3. [使用原生事件实现基础Swipe](#使用原生事件实现基础swipe)
4. [使用第三方库react-swipeable](#使用第三方库react-swipeable)
5. [完整代码示例](#完整代码示例)
6. [性能优化与注意事项](#性能优化与注意事项)
7. [常见问题解答](#常见问题解答)

---

## 什么是Swipe手势
Swipe（滑动）是移动端常见的交互手势，指用户在触摸屏上快速横向或纵向滑动手指的操作。在React应用中，常用于实现：
- 轮播图切换
- 卡片滑动删除
- 页面切换导航
- 手势操作面板

---

## React中实现Swipe的常见方案

### 方案对比表
| 方案 | 优点 | 缺点 | 适用场景 |
|------|------|------|----------|
| 原生事件 | 零依赖，高性能 | 需要手动处理复杂逻辑 | 简单手势需求 |
| react-swipeable | 开箱即用，支持复杂手势 | 增加包体积 | 需要完善手势支持的项目 |
| Hammer.js | 功能全面 | 体积较大，需额外集成 | 专业级手势应用 |

---

## 使用原生事件实现基础Swipe

### 核心实现步骤
1. 监听触摸事件
2. 计算滑动方向和距离
3. 触发回调函数

```jsx
import React, { useRef, useState } from 'react';

const SwipeComponent = () => {
  const [swipeDirection, setSwipeDirection] = useState('');
  const touchStart = useRef(null);
  const touchEnd = useRef(null);

  // 最小滑动距离阈值
  const minSwipeDistance = 50; 

  const onTouchStart = (e) => {
    touchEnd.current = null;
    touchStart.current = e.targetTouches[0].clientX;
  };

  const onTouchMove = (e) => {
    touchEnd.current = e.targetTouches[0].clientX;
  };

  const onTouchEnd = () => {
    if (!touchStart.current || !touchEnd.current) return;
    
    const distance = touchStart.current - touchEnd.current;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;

    if (isLeftSwipe) {
      setSwipeDirection('左滑');
      // 执行左滑业务逻辑
    } else if (isRightSwipe) {
      setSwipeDirection('右滑');
      // 执行右滑业务逻辑
    }
  };

  return (
    <div 
      style={{ width: '100%', height: '200px', background: '#eee' }}
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      当前手势：{swipeDirection || '未检测到滑动'}
    </div>
  );
};

使用第三方库react-swipeable

安装与基础使用

npm install react-swipeable

import { useSwipeable } from 'react-swipeable';

const SwipeableComponent = () => {
  const handlers = useSwipeable({
    onSwipedLeft: () => console.log('左滑触发'),
    onSwipedRight: () => console.log('右滑触发'),
    onSwipedUp: () => console.log('上滑触发'),
    onSwipedDown: () => console.log('下滑触发'),
    swipeDuration: 500,
    preventDefaultTouchmoveEvent: true,
    trackMouse: true // 支持鼠标拖动
  });

  return (
    <div {...handlers} style={{ width: '100%', height: '300px', background: '#ddd' }}>
      尝试用鼠标或手指滑动
    </div>
  );
};

高级配置参数

完整代码示例

轮播图实现案例

import { useState } from 'react';
import { useSwipeable } from 'react-swipeable';

const Carousel = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const updateIndex = (newIndex) => {
    // 处理循环逻辑
    if (newIndex < 0) newIndex = items.length - 1;
    else if (newIndex >= items.length) newIndex = 0;
    
    setActiveIndex(newIndex);
  };

  const handlers = useSwipeable({
    onSwipedLeft: () => updateIndex(activeIndex + 1),
    onSwipedRight: () => updateIndex(activeIndex - 1),
    trackMouse: true
  });

  return (
    <div {...handlers} style={{ overflow: 'hidden' }}>
      <div style={{ 
        transform: `translateX(-${activeIndex * 100}%)`,
        transition: 'transform 0.3s ease-out'
      }}>
        {items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
      
      <div className="indicators">
        {items.map((_, index) => (
          <button 
            key={index}
            onClick={() => updateIndex(index)}
            className={index === activeIndex ? 'active' : ''}
          />
        ))}
      </div>
    </div>
  );
};

性能优化与注意事项

1. 事件节流处理

import { throttle } from 'lodash';

const throttledHandler = throttle((direction) => {
  // 处理逻辑
}, 300);

1. 避免内存泄漏

• 组件卸载时移除事件监听
• 使用useEffect清理函数

1. 移动端适配问题

• 添加CSS属性touch-action: pan-y确保垂直滚动不受影响
• 测试iOS和Android的touch事件差异

常见问题解答

Q1: 滑动时页面跟着滚动怎么办？

.swipe-container {
  touch-action: pan-x; /* 只允许横向触摸 */
}

Q2: 如何实现滑动删除确认？

const handlers = useSwipeable({
  onSwipedLeft: () => {
    // 显示确认按钮
    setIsConfirmVisible(true);
  },
  delta: 60 // 需要滑动更远距离
});

Q3: 如何检测滑动速度？

const handlers = useSwipeable({
  onSwiping: ({ velocity }) => {
    if (velocity > 0.5) {
      // 快速滑动处理
    }
  }
});

提示：实际开发中建议根据项目需求选择合适方案，简单交互可用原生实现，复杂场景推荐使用成熟库。 “`