mina-touch

mina-touch，一個方便、輕量的 小程序 手勢事件監(jiān)聽庫。事件庫部分邏輯參考alloyFinger，在此做出聲明和感謝

change log：

1. 2019.03.10 優(yōu)化監(jiān)聽和繪制邏輯，動畫不卡頓
2. 2019.03.12 修復(fù)第二次之后縮放閃爍的 bug，pinch 添加 singleZoom 參數(shù)
3. 2020.12.13 更名 mina-touch
4. 2020.12.27 上傳 npm 庫；優(yōu)化使用方式；優(yōu)化 README

支持的事件

• 支持 pinch 縮放
• 支持 rotate 旋轉(zhuǎn)
• 支持 pressMove 拖拽
• 支持 doubleTap 雙擊
• 支持 swipe 滑動
• 支持 longTap 長按
• 支持 tap 按
• 支持 singleTap 單擊

demo 展示

1. demo1：監(jiān)聽 pressMove 拖拽 手勢

   <

2. demo2: 監(jiān)聽 pinch 縮放 和 rotate 旋轉(zhuǎn) 手勢 (已優(yōu)化動畫卡頓 bug)

3. demo3: 測試監(jiān)聽雙擊事件

4. demo4: 測試監(jiān)聽長按事件

使用方法

大致可以分為 4 步：

1. npm 安裝 mina-touch，開發(fā)工具構(gòu)建 npm
2. 引入 mina-touch
3. onload 實例化 mina-touch
4. wxml 綁定實例

命令行

npm install mina-touch
安裝完成后，開發(fā)工具構(gòu)建 npm

*.js

import MinaTouch from 'mina-touch'; // 1. 引入mina-touch

Page({
  onLoad: function (options) {
      // 2. onload實例化mina-touch
      //會創(chuàng)建this.touch1指向?qū)嵗龑ο?/span>
    new MinaTouch(this, 'touch1', {
      // 監(jiān)聽事件的回調(diào)：multipointStart，doubleTap，longTap，pinch，pressMove，swipe等等
      // 具體使用和參數(shù)請查看github-README（底部有g(shù)ithub地址
    });
  },
});
復(fù)制代碼

NOTE:

1. 多類型事件監(jiān)聽觸發(fā) setData 時，建議把數(shù)據(jù)合并，在 touchMove 中一起進(jìn)行 setData ，以減少短時內(nèi)多次 setData 引起的動畫延遲和卡頓（參考 demo2）

*.wxml

在 view 上綁定事件并對應(yīng)：

<view
  catchtouchstart="touch1.start"
  catchtouchmove="touch1.move"
  catchtouchend="touch1.end"
  catchtouchcancel="touch1.cancel"
>
</view>
<!-- 
touchstart -> 實例對象名.start
touchmove -> 實例對象名.move
touchend -> 實例對象名.end
touchcancel -> 實例對象名.cancel 
-->
復(fù)制代碼

NOTE:

1. 如果不影響業(yè)務(wù)，建議使用 catch 捕獲事件，否則易造成監(jiān)聽動畫卡頓（參考 demo2）

以上簡單幾步即可使用 mina-touch 手勢庫 :blush::blush::blush: