微信小程序> 微信小程序系列触摸滑动事件

微信小程序系列触摸滑动事件

浏览量:571 时间: 来源:冬杨

微信小程序通过三个事件共同作用实现了触摸滑动事件,即 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(start[0]  end[0] - 50){      console.log('右滑')    }else if(start[0]  end[0] + 50){      console.log('左滑')    }else{      console.log('静止')    }  },

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

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

更多信息联系我的微信公众号 「大学IT圈」
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎