All Projects → Yrobot → mina-touch

Yrobot / mina-touch

Licence: MIT license
mina-touch,一个方便、轻量的小程序手势事件监听库

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to mina-touch

Cityselector
微信小程序 城市/区县定位选择模块 汉字/拼音搜索 可直接使用 另附 mpvue 版本 city picker / auto positioning / auto complete
Stars: ✭ 276 (+146.43%)
Mutual labels:  mina, wx
Silk V3 Decoder
kn007's blog
Stars: ✭ 1,832 (+1535.71%)
Mutual labels:  mina
Mina Sshd
Mirror of Apache MINA SSHD
Stars: ✭ 384 (+242.86%)
Mutual labels:  mina
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (+929.46%)
Mutual labels:  mina
Jforgame
jforgame是一个一站式游戏服务器开发框架。包含游戏服,跨服,匹配服,后台管理系统等模块。同时提供大量业务案例以供学习。
Stars: ✭ 601 (+436.61%)
Mutual labels:  mina
Mina Webpack
🍱 Mina single-file-component meets Webpack
Stars: ✭ 77 (-31.25%)
Mutual labels:  mina
Weapp One
ONE·一个|图文 微信小程序/开源代码
Stars: ✭ 295 (+163.39%)
Mutual labels:  mina
Leshare Shop Weapp
基于微信小程序的电商平台,采用原生框架开发
Stars: ✭ 183 (+63.39%)
Mutual labels:  mina
Wechat Weapp Movie
🎬电影推荐 - 微信小程序
Stars: ✭ 1,355 (+1109.82%)
Mutual labels:  mina
Mina Unicorn
Unicorn tasks for Mina
Stars: ✭ 44 (-60.71%)
Mutual labels:  mina
Lealone Plugins
与 Lealone 集成的各类插件(例如网络框架以及不同的数据库协议和存储引擎)
Stars: ✭ 31 (-72.32%)
Mutual labels:  mina
Mina
Mina is a new cryptocurrency with a constant size blockchain, improving scaling while maintaining decentralization and security.
Stars: ✭ 617 (+450.89%)
Mutual labels:  mina
Tina Hackernews
📺 A Tina.js powered Wechat-Mini-Program implementation of Hacker News Reader
Stars: ✭ 93 (-16.96%)
Mutual labels:  mina
Java Study
java-study 是本人学习Java过程中记录的一些代码!从Java基础的数据类型、jdk1.8的Lambda、Stream和日期的使用、 IO流、数据集合、多线程使用、并发编程、23种设计模式示例代码、常用的工具类, 以及一些常用框架,netty、mina、springboot、kafka、storm、zookeeper、redis、elasticsearch、hbase、hive等等。
Stars: ✭ 571 (+409.82%)
Mutual labels:  mina
Travelibrary
🐣流动图书馆微信小程序前端
Stars: ✭ 160 (+42.86%)
Mutual labels:  mina
Hera
A framework for running WeChat applet. (小程序 SDK,小程序转 H5,小程序转安卓、iOS 原生应用、小程序渲染引擎)
Stars: ✭ 1,186 (+958.93%)
Mutual labels:  mina
Game Server
Distributed Java game server, including cluster management server, gateway server, hall server, game logic server, background monitoring server and a running web version of fishing. State machine, behavior tree, A* pathfinding, navigation mesh and other AI tools
Stars: ✭ 916 (+717.86%)
Mutual labels:  mina
wxEditor
微信编辑器,微信排版,微信公众号编辑器, 微信素材,前后端已搭建完整,原UEditor(百度编辑器,PHP1.4.3版) 二次开发 (微信编辑器,微信公众号,图文发布在线编辑器) 。
Stars: ✭ 86 (-23.21%)
Mutual labels:  wx
Minamanager
🚙🚙🚙基于mina 实现Android客户端长连接
Stars: ✭ 160 (+42.86%)
Mutual labels:  mina
Minasmsverification
短信验证:基于阿里云的 微信小程序 功能模块: 直接用 / mini-program + Node.js + Alibaba Cloud / Front & Back End
Stars: ✭ 94 (-16.07%)
Mutual labels:  mina

mina-touch

mina-touch,一个方便、轻量的 小程序 手势事件监听库
事件库部分逻辑参考alloyFinger,在此做出声明和感谢

change log:

  1. 2019.03.10 优化监听和绘制逻辑,动画不卡顿
  2. 2019.03.12 修复第二次之后缩放闪烁的 bug,pinch 添加 singleZoom 参数
  3. 2020.12.13 更名 mina-touch
  4. 2020.12.27 上传 npm 库;优化使用方式;优化 README

支持的事件

  • 支持 pinch 缩放
  • 支持 rotate 旋转
  • 支持 pressMove 拖拽
  • 支持 doubleTap 双击
  • 支持 swipe 滑动
  • 支持 longTap 长按
  • 支持 tap 按
  • 支持 singleTap 单击

扫码体验

demo 展示

  1. demo1:监听 pressMove 拖拽 手势 查看 demo 代码

  2. demo2: 监听 pinch 缩放 和 rotate 旋转 手势 (已优化动画卡顿 bug) 查看 demo 代码

  3. demo3: 测试监听双击事件 查看 demo 代码

  4. demo4: 测试监听长按事件 查看 demo 代码

demo 代码

demo 代码地址 mina-tools-client/mina-touch

使用方法

大致可以分为 4 步:

  1. npm 安装 mina-touch,开发工具构建 npm
  2. 引入 mina-touch
  3. onload 实例化 mina-touch
  4. wxml 绑定实例

命令行

npm install mina-touch
安装完成后,开发工具构建 npm

*.js

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

Page({
  onLoad: function (options) {
    new MinaTouch(this, 'touch1', {
      // 2. onload实例化mina-touch
      //会创建this.touch1指向实例对象
      touchStart: function () {},
      touchMove: function () {},
      touchEnd: function () {},
      touchCancel: function () {},
      multipointStart: function () {
        console.log('multipointStart');
      }, //一个手指以上触摸屏幕触发
      multipointEnd: function () {
        console.log('multipointEnd');
      }, //当手指离开,屏幕只剩一个手指或零个手指触发(一开始只有一根手指也会触发)
      tap: function () {
        console.log('Tap');
      }, //点按触发,覆盖下方3个点击事件,doubleTap时触发2次
      doubleTap: function () {
        console.log('doubleTap');
      }, //双击屏幕触发
      longTap: function () {
        console.log('longTap');
      }, //长按屏幕750ms触发
      singleTap: function () {
        console.log('singleTap');
      }, //单击屏幕触发,包括长按
      rotate: function (evt) {
        //evt.angle代表两个手指旋转的角度
        console.log('rotate:' + evt.angle);
      },
      pinch: function (evt) {
        //evt.zoom代表两个手指缩放的比例(多次缩放的累计值),evt.singleZoom代表单次回调中两个手指缩放的比例
        console.log('pinch:' + evt.zoom);
      },
      pressMove: function (evt) {
        //evt.deltaX和evt.deltaY代表在屏幕上移动的距离,evt.target可以用来判断点击的对象
        console.log(evt.target);
        console.log(evt.deltaX);
        console.log(evt.deltaY);
      },
      swipe: function (evt) {
        //在touch结束触发,evt.direction代表滑动的方向 ['Up','Right','Down','Left']
        console.log('swipe:' + evt.direction);
      },
    });
  },
});

NOTE:

  1. 多类型事件监听触发 setData 时,建议把数据合并,在 touchMove 中一起进行 setData ,以减少短时内多次 setData 引起的动画延迟和卡顿(参考 demo2)

*.wxml

在 view 上绑定事件并对应:

<view
  catchtouchstart="touch1.start"
  catchtouchmove="touch1.move"
  catchtouchend="touch1.end"
  catchtouchcancel="touch1.cancel"
>
</view>
<!-- 
touchstart -> 实例对象名.start
touchmove -> 实例对象名.move
touchend -> 实例对象名.end
touchcancel -> 实例对象名.cancel 
-->

NOTE:

  1. 如果不影响业务,建议使用 catch 捕获事件,否则易造成监听动画卡顿(参考 demo2)

以上简单几步即可使用 mina-touch 手势库

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].