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

Posted £AP︶ㄣOL◢◤LO

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序~触摸相关事件(拖拽操作手势识别多点触控)相关的知识,希望对你有一定的参考价值。

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:

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




以上是关于微信小程序~触摸相关事件(拖拽操作手势识别多点触控)的主要内容,如果未能解决你的问题,请参考以下文章

js触摸事件详细解读

检测 UWP 应用中触摸板的多点触控手势

Flutter 触摸事件监听 Listener 手势识别示例

WPF学习第十八章 多点触控输入

WPF学习第十八章 多点触控输入

微信小程序之触控事件