微信小遊戲滑動判斷實作

這幾天在寫微信小遊戲，實作了一個滑動的效果。具體就是手指在螢幕上滑動，判斷滑動方向是上、下、左或右。

思路：

擷取滑動的起始坐标 (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)
})