mobile-touch-gesture

current version 1.0.3

Foreword

This is a mobile touch gesture and pc mouse gesture library.

Feature

Gestures are supported below:

swiperStart, swiperMove, swiperEnd, swiperLeft，swiperRight, swiperUp, swiperDown,

swiperLeftRight, swiperLeftUp, swiperLeftDown,

swiperRightLeft, swiperRightUp, swiperRightDown,

swiperUpDown, swiperUpLeft, swiperUpRight,

swiperDownUp, swiperDownLeft ,swiperDownRight,

tap, doubleTap, longTap.

Usage

Import mobile touch gesture library, then new an instance via some necessary arguments.

import MobileTouchGesture from "mobile-touch-gesture";
......
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)
    },
    swiperEnd(val) {
        console.log(val)
    },
    swiperLeft() {
        console.log('swiperLeft')
    },
    swiperRight() {
        console.log('swiperRight')
    },
    swiperUp() {
        console.log('swiperUp')
    },
    swiperDown() {
        console.log('swiperDown')
    },
    swiperLeftRight() {
        console.log('swiperLeftRight')
    },
    swiperLeftTop() {
        console.log('swiperLeftTop')
    },
    swiperLeftDown() {
        console.log('swiperLeftDown')
    },
    swiperRightLeft() {
        console.log('swiperRightLeft')
    },
    swiperRightUp() {
        console.log('swiperRightUp')
    },
    swiperRightDown() {
        console.log('swiperRightDown')
    },
    swiperUpDown() {
        console.log('swiperUpDown')
    },
    swiperUpLeft() {
        console.log('swiperUpLeft')
    },
    swiperUpRight() {
        console.log('swiperUpRight')
    },
    swiperDownUp() {
        console.log('swiperDownUp')
    },
    swiperDownLeft() {
        console.log('swiperDownLeft')
    },
    swiperDownRight() {
        console.log('swiperDownRight')
    },
    tap(e) {
        console.log('tap')
    },
    doubleTap(e) {
        console.log('doubleTap')
    },
    longTap(e) {
        console.log('longTap')
    }
})

MobileTouchGesture class acept two arguments, first is target element, second is an options object

Arguement

| attribute | type | defalut value | descrition | | --------- | ------- | ------------- | -------------- | | ele | Element | | target element | | options | Object | | options |

Basice gestures: swiperStart, swiperMove, swiperLeft，swiperRight, swiperUp, swiperDown, swiperLeftRight, swiperRightLeft, swiperUpDown, swiperDownUp , tap, doubleTap, longTap.

If you want to handler more complex situation, you can use swiperStart and swiperMove to handle it.

You can get library version via MobileTouchGesture.version.

Options attributes

| attribute | type | defalut value | descrition | | -------------- | ------ | --------------------------------------------------- | ------------------------------------------------------------ | | effectiveValue | Number | 20 | trigger function until move distance reach effectiveValue | | prompt | Object | {show: false, nameMap:{invalid: 'invalidgesture'} } | show attribute is to defined tips show or not, and you can use nameMap to redefined gesture tips, when gesture is triggered | | longTapTime | Number | 200 ms | long press trigger time | | doubleTapTime | Number | 200 ms | double click gap time |

You can redefine time for long tap and double tap to trigger relative event.

Options funtions

| attribute | type | defalut value | descrition | | --------------- | -------- | ---------------------- | ------------------------ | | swiperLeft | Function | function(){} | slide left | | swiperRight | Function | function(){} | slide right | | swiperUp | Function | function(){} | slide up | | swiperDown | Function | function(){} | slide down | | swiperLeftRight | Function | function(){} | slide left then back | | swiperLeftUp | Function | function(){} | slide left then up | | swiperLeftDown | Function | function(){} | slide left then down | | swiperRightLeft | Function | function(){} | slide right then back | | swiperRightUp | Function | function(){} | slide right then up | | swiperRightDown | Function | function(){} | slide right then down | | swiperUpDown | Function | function(){} | slide up then back | | swiperUpRight | Function | function(){} | slide up then right | | swiperUpLeft | Function | function(){} | slide up then left | | swiperDownUp | Function | function(){} | slide down then back | | swiperDownRight | Function | function(){} | slide down then right | | swiperDownLeft | Function | function(){} | slide down then left | | tap | Function | function(e){} | click | | doubleTap | Function | function(e){} | double click | | longTap | Function | function(e){} | long press | | swiperStart | Function | function(val){} | trigger when touch start | | swiperMove | Function | function(val1, val2){} | trigger when move start | | swiperEnd | Function | function(val1, val2){} | trigger when move end |

中文文档

http://yunkus.com/post/5ddb6b3cf9b59b20e611e714