微信小程序实现触摸滑动事件

作者: deepwinter 分类: 前端 发布时间: 2019-07-16 19:49 点击量: 104 次阅读

微信小程序通过三个事件共同作用实现了触摸滑动事件,即bingtouchstartbindtouchmovebindtouchend事件。


WXML:

<view class='btn' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>
OK
</view>

JS:

data: {
  touchS : [0,0],
  touchE : [0,0]
},
touchStart: function (e) {
  // console.log(e.touches[0].pageX)
  let sx = e.touches[0].pageX
  let sy = e.touches[0].pageY
  this.data.touchS = [sx, sy]
},
touchMove: function (e) {
  let sx = e.touches[0].pageX;
  let sy = e.touches[0].pageY;
  this.data.touchE = [sx, sy]
},
touchEnd: function (e) {
  let start = this.data.touchS
  let end = this.data.touchE
  //console.log(start)
  //console.log(end)
  if (end[0] === 0 && end[1] === 0) {
    //console.log('没有滑动')
    this.setData({
      touchS: [0, 0]
    })
    return
  }
  if (start[0] < end[0] - 50) {
    //console.log('右滑')
    this.setData({
      touchS: [0, 0],
      touchE: [0, 0]
    })
    //todo ...
  } else if (start[0] > end[0] + 50) {
    //console.log('左滑')
    this.setData({
      touchS: [0, 0],
      touchE: [0, 0]
    })
    //todo ...
  } else {
    //console.log('没有滑动')
    this.setData({
      touchS: [0, 0],
      touchE: [0, 0]
    })
  }
}

touchstart时,监听到触摸开始时的(x, y)位置;在touchMove方法中持续监听触摸点的位置(x, y),并保存在data中;在touchEnd方法中对开始的触摸位置和结束的触摸位置进行判断,如果移动距离大于50则判定为发生触摸滑动事件。

在上面示例中,当X轴方向的移动超过50时即判定为左滑或右滑,相应的也可以通过判断Y轴方向的滑动长度,来判断上滑或是下滑,由此实现触摸滑动的功能。


参考:https://blog.csdn.net/weixin_43744799/article/details/85225450

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注