101 lines
2.3 KiB
Markdown
101 lines
2.3 KiB
Markdown
|
|
|
|
# Install
|
|
|
|
You can install it via npm:
|
|
|
|
```html
|
|
npm install alloyfinger
|
|
```
|
|
|
|
# Usage
|
|
|
|
### Omi Version:
|
|
|
|
* [omi-finger](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-finger)
|
|
|
|
```js
|
|
render() {
|
|
return `
|
|
<div>
|
|
<div omi-finger ref="touchArea" onTap="handleTap" onSwipe="handleSwipe" >
|
|
Tap or Swipe Me!
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
```
|
|
|
|
### Pure JS:
|
|
```js
|
|
var af = new AlloyFinger(element, {
|
|
touchStart: function () { },
|
|
touchMove: function () { },
|
|
touchEnd: function () { },
|
|
touchCancel: function () { },
|
|
multipointStart: function () { },
|
|
multipointEnd: function () { },
|
|
tap: function () { },
|
|
doubleTap: function () { },
|
|
longTap: function () { },
|
|
singleTap: function () { },
|
|
rotate: function (evt) {
|
|
console.log(evt.angle);
|
|
},
|
|
pinch: function (evt) {
|
|
console.log(evt.scale);
|
|
},
|
|
pressMove: function (evt) {
|
|
console.log(evt.deltaX);
|
|
console.log(evt.deltaY);
|
|
},
|
|
swipe: function (evt) {
|
|
console.log("swipe" + evt.direction);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* this method can also add or remove the event handler
|
|
*/
|
|
var onTap = function() {};
|
|
|
|
af.on('tap', onTap);
|
|
af.on('touchStart', function() {});
|
|
|
|
af.off('tap', onTap);
|
|
|
|
/**
|
|
* this method can destroy the instance
|
|
*/
|
|
af = af.destroy();
|
|
```
|
|
|
|
### React Version:
|
|
|
|
```js
|
|
render() {
|
|
return (
|
|
<AlloyFinger
|
|
onTap={this.onTap.bind(this)}
|
|
onMultipointStart={this.onMultipointStart.bind(this)}
|
|
onLongTap={this.onLongTap.bind(this)}
|
|
onSwipe={this.onSwipe.bind(this)}
|
|
onPinch={this.onPinch.bind(this)}
|
|
onRotate={this.onRotate.bind(this)}
|
|
onPressMove={this.onPressMove.bind(this)}
|
|
onMultipointEnd={this.onMultipointEnd.bind(this)}
|
|
onDoubleTap={this.onDoubleTap.bind(this)}>
|
|
<div className="test">the element that you want to bind event</div>
|
|
</AlloyFinger>
|
|
);
|
|
}
|
|
```
|
|
|
|
# Thanks and Donate
|
|
|
|
* [transformjs](http://alloyteam.github.io/AlloyTouch/transformjs/)
|
|
* [Donate to AlloyFinger](http://alloyteam.github.io/donate.html)
|
|
|
|
# License
|
|
This content is released under the [MIT](http://opensource.org/licenses/MIT) License.
|