微信小游戏滑动判断实现

这几天在写微信小游戏，实现了一个滑动的效果。具体就是手指在屏幕上滑动，判断滑动方向是上、下、左或右。

思路：

获取滑动的起始坐标 (x0,y0) ( x 0 , y 0 ) ，结束坐标 (xt,yt) ( x t , y t ) 。定义 k=yt−y0xt−x0 k = y t − y 0 x t − x 0 （斜率）。根据 k k 、yt−y0yt−y0、 xt−x0 x t − x 0 的值进行判断。

上代码：

/*SwipeListener.js*/
export default class SwipeListener {
  constructor(callback) {
    let t = this;
    /*获取起始坐标和id*/
    wx.onTouchStart(function (e) {
      t.x0 = e.changedTouches[].clientX
      t.y0 = e.changedTouches[].clientY
      t.startId = e.changedTouches[].identifier
    })
    /*获取结束坐标和id*/
    wx.onTouchEnd(function (e) {
      t.xt = e.changedTouches[].clientX
      t.yt = e.changedTouches[].clientY
      t.endId = e.changedTouches[].identifier
      /*判断并回调*/
      t._call(callback)
    })
  }
  _call(callback){
    /* 判断是否为同一次触摸，若不是则直接忽略*/
    if(this.endId === this.startId){
      let w = this.xt-this.x0
      let h = this.yt-this.y0
      let k = h/w
      /*不使用1判断斜率，而留有余量，防止误触*/
      if(k>||k<-){
        /*滑动20px以上激活，防止误触*/
        if(h<-) callback() /*向上*/
        if(h>) callback() /*向下*/
      }
      if(k<&&k>-) {
        if(w<-) callback() /*向左*/
        if(w>) callback() /*向右*/
      }
    }
  }
}
           

调用：

import SwipeListener from "./SwipeListener.js"
/*...*/
new SwipeListener( function(e) {
  console.log(e)
})