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].pageX let currentY = event.touches[0].pageY let tx = currentX - this.data.lastX let ty = currentY - this.data.lastY let 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 = currentX this.data.lastY = currentY this.setData({ text: text, }); }, handletouchtart: function (event) { // console.log(event) // 赋值 this.data.lastX = event.touches[0].pageX this.data.lastY = event.touches[0].pageY } })
多点触控案例3:
根据相关功能可进行通过编辑器-远程调试,如手指张开的操作,可以分别判断两个触摸点的移动方向,比如靠左的触摸点向左滑动,靠右的触摸点向右滑动,即可判定为手指张开操作。