AlloyFinger：超级小的web手势库

AlloyFinger：超级小的web手势库

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 (

) } css() { return `.touchArea{ background-color: green; width: 200px; min-height: 200px; text-align: center; color:white; height:auto; white-space: pre-line; }` }}render(, 'body')

omi-fingercss3transform

Others

AlloyCrop

License

This content is released under the MIT License.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。