ReactToucher

React手势管理系统

Usage

npm install ReactToucher --save

//  ...

import React,{ Component } from "react";
import ReactDOM from "react-dom";
import ReactToucher from "ReactToucher";

class App extend Component {

    constructor(props) {
        super(props);
    }

    handleSwipe() {
        //  ...
    }

    handleLongTap() {
        //  ...
    }

    render() {
        const config={
            event: {
                longTap: {
                    el: '.div',
                    handler: this.handleLongTap.bind(this)
                },
                swipe: this.handleSwipe.bind(this)
            },
            cfg:{
                longTapTime: 700
            }
        };

        return (
            <div>
                <ReactToucher config={config}>
                    <div className="div"></div>
                    <div className="div"></div>
                </ReactToucher>
            </div>
        );
    }
}

ReactDOM.rander(<App />, document.querySelector("#app"));

支持事件类型

singleTap

longTap

swipe

swipeStart

swipeEnd

swipeUp

swipeRight

swipeDown

swipeLeft

pinch

rotate

在传入事件回调的时候,需要在组件中用

this.xxxMethod.bind(this)

否则,如果在该方法中用会导致this指向window的问题

所有的可选参数

• config

当该事件对应的配置项是Object的时候,必须传入el和handler属性,否则该配置项无效,且handler的触发条件是事件的作用在el对应的元素上

• cfg