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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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
  }
})