最近发现一个React非常好的用的滑动事件处理的钩子组件
Hook details
- 钩子的使用需要react>=16.8.0
handlers
中包含的道具当前是ref
和onMouseDown
请展开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>
);
}
最后就简单的实现了一个滑动的效果了 🤞