微信小程序~触摸相关事件（拖拽操作、手势识别、多点触控）

touchstart     手指触摸动作开始
touchmove    手指触摸后移动
touchcancel  手指触摸动作被打断，如来电提醒，弹窗
touchend      手指触摸动作结束

拖拽操作案例1：（注意按钮拖出屏幕边缘处理）

<view id="id" bindtouchmove="handletouchmove" class=‘demo‘ style=‘top:{{ballTop}}px; left: {{ballLeft}}px‘></view>

page{background:red}
.demo{ width:60px; height:60px; background:#545345;box-shadow:2px 2px 10px #AAA;border-radius: 20px;position: absolute; }

Page({data: {ballTop: 0,ballLeft: 0,screenHeight: 0,screenWidth: 0},onLoad: function () {// 一是会将按钮拖出屏幕边缘，// 二是按钮始终在鼠标右下方。// 获取屏幕宽高var _this = this;wx.getSystemInfo({success: function (res) {_this.setData({screenHeight: res.windowHeight,screenWidth: res.windowWidth,});}});},handletouchmove: function (event) {// console.log(event)let pageX = event.touches[0].pageX;let pageY = event.touches[0].pageY;//屏幕边界判断   中心点位置if (pageX < 30 || pageY < 30)return;if (pageX > this.data.screenWidth - 30)return;if (pageY > this.data.screenHeight - 30)return;//左上角位置this.setData({ballTop: event.touches[0].pageY - 30,ballLeft: event.touches[0].pageX - 30,});}
})

手势识别案例2：

<view id="id" bindtouchstart="handletouchtart" bindtouchmove="handletouchmove"
style="width:100%px;height:80px;line-height:80px;color:#fff;text-align:center; background:red">
{{text}}
</view>

Page({data: {lastX: 0,lastY: 0,text: "没有滑动",},handletouchmove: function (event) {// console.log(event)let currentX = event.touches[0].pageXlet currentY = event.touches[0].pageYlet tx = currentX - this.data.lastXlet ty = currentY - this.data.lastYlet text = ""if (Math.abs(tx) > Math.abs(ty)) {//左右方向滑动if (tx < 0)text = "向左滑动"else if (tx > 0)text = "向右滑动"}else {//上下方向滑动if (ty < 0)text = "向上滑动"else if (ty > 0)text = "向下滑动"}//将当前坐标进行保存以进行下一次计算this.data.lastX = currentXthis.data.lastY = currentYthis.setData({text: text,});},handletouchtart: function (event) {// console.log(event)// 赋值this.data.lastX = event.touches[0].pageXthis.data.lastY = event.touches[0].pageY}
})

多点触控案例3：

根据相关功能可进行通过编辑器-远程调试，如手指张开的操作，可以分别判断两个触摸点的移动方向，比如靠左的触摸点向左滑动，靠右的触摸点向右滑动，即可判定为手指张开操作。

微信小程序~触摸相关事件（拖拽操作、手势识别、多点触控）相关推荐

android可拖拽九宫格,微信小程序实现九宫格图片拖拽
(在真机上的效果就不演示了,是差不多的) 实现思路布局在这里运用到了微信小程序的moveable-area和moveable-view两个标签. moveable-area是可拖拽的区域,需要设置 ...
微信小程序（游戏）----拖拽拼图（图片分块和打乱顺序）
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 效果图图片分块创建二维数组 typeArr 和一维有序数组 pointsArr: 计算每个块区v ...
微信小程序WebSocket相关问题说明
看本帖的前提是:你的WebSocket在小程序之外是正常可用的:因为WebSocket不是小程序独有的,所有大部分问题在网上是可以找到说明的,本帖只是聚合了一些小程序中使用WebSocket中遇到的问 ...
简单描述下微信小程序的相关文件类型？
简单描述下微信小程序的相关文件类型? 微信小程序项目结构主要有四个文件类型,如下: .WXML 是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构.内部主要是微信自己定义的一套组件 ...
[微信小程序]微信小程序点击事件返回值的target分析
微信小程序点击事件返回值的target分析测试过程在微信小程序中创建以下图片然后在调试中点击下面第5个. console返回两个e 第一个e是第5块小块的e 第二个e是下面全部9小块组成的大块的 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序使用云函数进行mysql操作
微信小程序使用云函数进行mysql操作其他操纵数据库方式的一些问题准备工作云函数代码调用云函数时候的代码最后还需要注意的一些小事情: 其他操纵数据库方式的一些问题现在使用小程序,对数据库的 ...
微信小程序-仿朋友圈点赞评论操作面板
目录微信小程序-仿朋友圈点赞评论操作面板一.效果二.实现 1.wxml实现 2.js实现 3.wxss实现三.记录 1.dataset使用微信小程序-仿朋友圈点赞评论操作面板一.效果二. ...
Android笔记:触摸事件的分析与总结----多点触控
其他相关博文: Android笔记:触摸事件的分析与总结----MotionEvent对象 Android笔记:触摸事件的分析与总结----TouchEvent处理机制 An ...

微信小程序~触摸相关事件（拖拽操作、手势识别、多点触控）

微信小程序~触摸相关事件（拖拽操作、手势识别、多点触控）相关推荐

最新文章

热门文章