[RFC]useSwipeEvent
Inchill opened this issue · comments
用于在移动端监听手势划动,便于处理上下左右划动时对应的操作。
API
interface Options {
threshold?: number; // 最小划动距离
maxTime?: number; // 快速划动最长时间
onSwipeLeft?: (event: TouchEvent) => void;
onSwipeRight?: (event: TouchEvent) => void;
onSwipeUp?: (event: TouchEvent) => void;
onSWipeDown?: (event: TouchEvent) => void;
}
type useSwipeEvent = <T>(options: Options) => T;
Demo
const onSwipeLeft = () => {
// page change
}
const onSwipeRight = () => {
// page change
};
useSwipeEvent({
threshold: 100,
maxTime: 500,
onSwipeLeft,
onSwipeRight
})
使用场景
- 从一个列表页进入详情页后,希望可以不返回列表页,就在详情页通过手势划动切换页面。
- 纵向滑动翻页,例如年度报告等活动页,可以通过上下划动切换页面。