[RFC]useSwipeEvent

[Inchill]

用于在移动端监听手势划动，便于处理上下左右划动时对应的操作。

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
})

使用场景

1. 从一个列表页进入详情页后，希望可以不返回列表页，就在详情页通过手势划动切换页面。
2. 纵向滑动翻页，例如年度报告等活动页，可以通过上下划动切换页面。