什么是useSwipeable?一个让你轻易实现滑动效果的Hook

最近发现一个React非常好的用的滑动事件处理的钩子组件

Hook details

  • 钩子的使用需要react>=16.8.0
  • handlers中包含的道具当前是refonMouseDown请展开handlers,因为其中包含的道具可能会随着react提高事件侦听能力而改变

使用之前需要安装包

  • npm i react-swipeable

引入我们的hook

import { useSwipeable } from 'react-swipeable'

我们先来看看这个钩子接收的参数

  • 第一个参数: 对象的形式写上对应事件的处理函数
perl 复制代码
{
  onSwiped,       // 任何方向滑动触发 (SwipeEventData) => void
  onSwipedLeft,   // 向左滑动触发 (SwipeEventData) => void
  onSwipedRight,  // 向右滑动触发 (SwipeEventData) => void
  onSwipedUp,     // 向上滑动触发 (SwipeEventData) => void
  onSwipedDown,   // 向下滑动触发  (SwipeEventData) => void
  onSwipeStart,   // 滑动开始时触发 (SwipeEventData) => void *see details*
  onSwiping,      // 滑动过程中触发 (SwipeEventData) => void
  onTap,          // After a tap ({ event }) => void

  // 传递回调,提供事件: ({ event }) => void
  onTouchStartOrOnMouseDown, // 需要 'touchstart' 和 'mousedown'
  onTouchEndOrOnMouseUp,     // 需要 `touchend` 和 `mouseup`
}

详细细节

OnSwipeStart-每次开始时只调用一次,在第一个onSwiping回调之前,SwipeEventData的第一个属性将为真

  • 第二个参数: 关于滑动需要使用到的配置
ts 复制代码
{
  delta: 10,                             // 开始滑动的最小距离 单位(px)
  preventScrollOnSwipe: false,           // 在滑动的时候是否防止滚动
  trackTouch: true,                      // 是否使用触摸滑动
  trackMouse: false,                     // 是否使用光标滑动
  rotationAngle: 0,                      // 设置旋转角度
  swipeDuration: Infinity,               // 允许的滑动时间 单位(ms)
  touchEventOptions: { passive: true },  // 触摸监听器的选项
}

详细细节

触摸监听器的配置不详细展开了可以去参考官方文档 链接贴在下面了

react-swipeable - npm (npmjs.com)

了解完这些不废话了直接上代码

  • 这边我使用的案例 拓展antd的Tabs组件去支持滑动切换
tsx 复制代码
import { Tabs } from 'antd';
import { useSwipeable } from 'react-swipeable'; //引入useSwipeable

const { TabPane } = Tabs;

function SwipeableTabs() {
  const [activeKey, setActiveKey] = useState(1);
  // 使用useSwipeable
  const handlers = useSwipeable({
    // 记得增加边界判断 比如activeKey >= 0 
    onSwipedLeft: () => setActiveKey(prevKey + 1),
    onSwipedRight: () => setActiveKey(prevKey - 1)
    // 开启鼠标控制滑动
    trackMouse: true
  });

  return (
      {/* 展开使用 */}
      <div {...handlers}>
       <Tabs activeKey={activeKey} >
          <TabPane tab="Tab 1" key="1">
            Content of Tab Pane 1
          </TabPane>
          <TabPane tab="Tab 2" key="2">
            Content of Tab Pane 2
          </TabPane>
          <TabPane tab="Tab 3" key="3">
            Content of Tab Pane 3
          </TabPane>
        </Tabs>
      </div>
  );
}

最后就简单的实现了一个滑动的效果了 🤞

相关推荐
qq_364371721 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
虾球xz9 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇10 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒10 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript