快速監聽小程序中的(de)手勢事件（縮放、雙擊、長按、滑動、拖拽）- mina-touch ...

發表時(shí)間：2021-2-28

發布人(rén)：融晨科技

浏覽次數：212

mina-touch

mina-touch，一個(gè)方便、輕量的(de) 小程序 手勢事件監聽庫。事件庫部分邏輯參考alloyFinger，在(zài)此做出(chū)聲明和(hé / huò)感謝

change log：

2019.03.10 優化監聽和(hé / huò)繪制邏輯，動畫不(bù)卡頓
2019.03.12 修複第二次之(zhī)後縮放閃爍的(de) bug，pinch 添加 singleZoom 參數
2020.12.13 更名 mina-touch
2020.12.27 上(shàng)傳 npm 庫；優化使用方式；優化 README

支持的(de)事件

支持 pinch 縮放
支持 rotate 旋轉
支持 pressMove 拖拽
支持 doubleTap 雙擊
支持 swipe 滑動
支持 longTap 長按
支持 tap 按
支持 singleTap 單擊

demo 展示

demo1：監聽 pressMove 拖拽手勢
<
demo2: 監聽 pinch 縮放和(hé / huò) rotate 旋轉手勢 (已優化動畫卡頓 bug)
demo3: 測試監聽雙擊事件
demo4: 測試監聽長按事件

使用方法

大(dà)緻可以(yǐ)分爲(wéi / wèi) 4 步：

npm 安裝 mina-touch，開發工具構建 npm
引入 mina-touch
onload 實例化 mina-touch
wxml 綁定實例

命令行

npm install mina-touch
安裝完成後，開發工具構建 npm

*.js

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

Page({
  onLoad: function (options) {
      // 2. onload實例化mina-touch
      //會創建this.touch1指向實例對象
    new MinaTouch(this, 'touch1', {
      // 監聽事件的(de)回調：multipointStart，doubleTap，longTap，pinch，pressMove，swipe等等
      // 具體使用和(hé / huò)參數請查看github-README（底部有github地(dì / de)址
    });
  },
});
複制代碼

NOTE:

多類型事件監聽觸發 setData 時(shí)，建議把數據合并，在(zài) touchMove 中一起進行 setData ，以(yǐ)減少短時(shí)内多次 setData 引起的(de)動畫延遲和(hé / huò)卡頓（參考 demo2）

*.wxml

在(zài) view 上(shàng)綁定事件并對應：

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