Preview
You can touch this → http://alloyteam.github.io/AlloyFinger/
Install
You can install it via npm:
npm install alloyfinger
Usage
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.zoom); }, 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();
Omi Version:
import { render, tag, WeElement } from 'omi' import 'omi-finger' @tag('my-app') class MyApp extends WeElement { install() { this.data.wording = 'Tap or Swipe Me!' } handleTap = (evt) => { this.data.wording += '\r\nTap' this.update() } handleSwipe = (evt) => { this.data.wording += '\r\nSwipe-' + evt.direction this.update() } render() { return ( <div> <omi-finger onTap={this.handleTap} abc={{a:1}} onSwipe={this.handleSwipe}> <div class="touchArea" > {this.data.wording} </div> </omi-finger> </div> ) } css() { return `.touchArea{ background-color: green; width: 200px; min-height: 200px; text-align: center; color:white; height:auto; white-space: pre-line; }` } } render(<my-app></my-app>, 'body')
Others
License
This content is released under the MIT License.