移动端手势库

前言

这篇文章将要介绍一个移动端手势库 mobileTouchGesture,刚上看到很多手势库基本都是差不多,但好像也不是我想要的,于是自己来写一个。

github 仓库:https://github.com/zhaoxixiong/mobile-touch-gesture

npm 包:https://www.npmjs.com/package/mobile-touch-gesture

这个手势库支持以下手势:

  1. swiperLeft 左滑
  2. swiperRight 右滑
  3. swiperUp 上滑
  4. swiperDown 下滑
  5. swiperLeftRight 左滑+右滑
  6. swiperRightLeft 右滑+左滑
  7. swiperUpDown 上滑+下滑
  8. swiperDownUp 下滑+上滑
  9. tap 单击
  10. doubleTap 双击
  11. longTap 长按

使用

使用也很简单,引入库,传入相关的配置项创建实例。

代码示例

下面是一个简单的示例

const MTG = new MobileTouchGesture(document.documentElement || document.body, {
    // set tips text
    prompt: {
        nameMap: {
            swiperUp: 'Up!!!',
            swiperRight: 'Right!!!'
        }
    },
    // trigger function
    swiperStart(val) {
        console.log(val)
    },
    swiperMove(val1, val2) {
        console.log(val1, val2)
    },
    swiperLeft() {
        console.log('swiperLeft')
    },
    swiperRight() {
        console.log('swiperRight')
    },
    swiperUp() {
        console.log('swiperUp')
    },
    swiperDown() {
        console.log('swiperDown')
    },
    swiperLeftRight() {
        console.log('swiperLeftRight')
    },
    swiperRightLeft() {
        console.log('swiperRightLeft')
    },
    swiperUpDown() {
        console.log('swiperUpDown')
    },
    swiperDownUp() {
        console.log('swiperDownUp')
    },


    tap(e) {
        console.log('tap')
    },
    doubleTap(e) {
        console.log('doubleTap')
    },
    longTap(e) {
        console.log('longTap')
    }
})

通过 MobileTouchGesture 类创建实例,可在创建时向类传入两个参数,第一个是目标元素,第二个是配置项。

如果想自定义手势可以通过 swiperStart 和 swiperMove 这两个回调来实现更回复杂的逻辑。

你还可以重新定义识别双击的时间间隔以及触发长按的时长。

Options

配置项分为属性和函数

可配置的属性有四个

  1. effectiveValue:默认值 20,可设置滑动多长距离后才触发事件
  2. prompt 是一个对像,手势提示语相关配置项,可自定义提示语以及是否显示提示语
  3. longTapTime:触发长按的时长
  4. doubleTapTime:识别为双击的时间间隔

可使用的回调方法有 13 个

  1. swiperLeft 左滑
  2. swiperRight 右滑
  3. swiperUp 上滑
  4. swiperDown 下滑
  5. swiperLeftRight 左滑+右滑
  6. swiperRightLeft 右滑+左滑
  7. swiperUpDown 上滑+下滑
  8. swiperDownUp 下滑+上滑
  9. tap 单击
  10. doubleTap 双击
  11. longTap 长按
  12. swiperStart 首次触摸屏幕时触发
  13. swiperMove 在屏幕上滑动时触发

如果在使用中有什么问题,可以到这里给我提 https://github.com/zhaoxixiong/mobile-touch-gesture/issues,我会及时修正。

声明

1.原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

2.本文永久链接:http://yunkus.com/post/5ddb6b3c31d51330

3.如果觉得本文对你有帮助,或者解决了你的问题,不妨扫一扫右边的二维码打赏支持,你的一分一毫,可能会让世界变得更美好。

微信
扫一扫,赏我
支付宝
扫一扫,赏我