mina-touch

Mina – Touch, a convenient, lightweight small program gesture event listener library event library part logical reference to alloyFinger, hereby make a declaration and thanks

Change the log:

  1. 2019.03.10 Optimize listening and drawing logic, animation does not lag
  2. 2019.03.12 Fixed zoom flicker after second pinch, Pinch added singleZoom parameter
  3. Renamed 2020.12.13 mina – touch
  4. Upload NPM library; Optimize the way of use; To optimize the README

Supported events

  • Supports PINCH scaling
  • Support for rotate
  • Support for pressMove drag
  • Support for doubleTap double-click
  • Support swipe slip
  • Support longTap long press
  • Support the tap on
  • SingleTap is supported

The demo show

  1. Demo1: Listens for the pressMove drag gesture

  2. Demo2: Listening to pinch scaling and rotate gestures

  3. Demo3: Tests listening to double-click events

  4. Demo4: Tests listening to long-press events

Method of use

It can be roughly divided into four steps:

  1. NPM installs Mina-touch, and development tools build NPM
  2. Introduce the mina – touch
  3. Onload instantiates mina-touch
  4. WXML binding instance

The command line

NPM install Mina-touch After the installation is complete, the development tool builds the NPM

*.js

import MinaTouch from 'mina-touch'; // 1. Introduce mina-touch

Page({
  onLoad: function (options) {
      Onload instantiates mina-touch
      // This.touch1 is created to point to the instance object
    new MinaTouch(this.'touch1', {
      // Listen for callbacks to events: multipointStart, doubleTap, longTap, pinch, pressMove, swipe, etc
      // See github-README for details}); }});Copy the code

NOTE:

  1. When setData is triggered by multi-type event monitoring, it is suggested to combine the data and perform setData together in touchMove to reduce animation delay and lag caused by multiple setData in a short time (refer to Demo2).

*.wxml

Bind events to view and correspond to:

<view
  catchtouchstart="touch1.start"
  catchtouchmove="touch1.move"
  catchtouchend="touch1.end"
  catchtouchcancel="touch1.cancel"
>
</view>
<! -- touchStart -> instance object name start touchmove -> instance object name move touchEnd -> instance object name end touchCancel -> instance object name Cancel ->
Copy the code

NOTE:

  1. If the service is not affected, it is recommended to use catch to capture the event, otherwise it is easy to cause monitoring animation lag (refer to DEMO2).

Mina-touch :blush::blush::blush:

For details about usage and parameters, see GithubGithub.com/Yrobot/mina…

If you like mina-Touch, click Start on Github! :star2::star2::star2: