Finger

移动端手势事件识别。

→ Touch Me

Usage

  1. import 'omim/finger'
  2. import { render, h, tag, WeElement } from 'omi'
  4. @tag('my-app')
  5. class MyApp extends WeElement {
  6.   handleTap = (evt) => {
  7.     this.wording += '\r\nTap'
  8.     this.update()
  9.   }
  11.   handleSwipe = (evt) => {
  12.     this.wording += '\r\nSwipe-' + evt.detail.direction
  13.     this.update()
  14.   }
  16.   render() {
  17.     return (
  18.       <div id='app'>
  19.         <m-finger onTap={this.handleTap} onSwipe={this.handleSwipe}>
  20.           <div class="touchArea">
  21.             {this.wording}
  22.           </div>
  23.         </m-finger>
  24.       </div>
  25.     )
  26.   }
  27. }
  29. render(<my-app />, 'body')

API

Props

  1. {
  2.   onTouchStart: function () { },
  3.   TouchMove: function () { },
  4.   TouchEnd:  function () { },
  5.   TouchCancel: function () { },
  6.   MultipointStart: function () { },
  7.   MultipointEnd: function () { },
  8.   Tap: function () { },
  9.   DoubleTap: function () { },
  10.   LongTap: function () { },
  11.   SingleTap: function () { },
  12.   Rotate: function (evt) {
  13.     console.log(evt.detail.angle)
  14.   },
  15.   Pinch: function (evt) {
  16.     console.log(evt.detail.zoom)
  17.   },
  18.   PressMove: function (evt) {
  19.     console.log(evt.detail.deltaX)
  20.     console.log(evt.detail.deltaY)
  21.   },
  22.   Swipe: function (evt) {
  23.     console.log("swipe" + evt.detail.direction)
  24.   }
  25. }