題外話：

1. 百度找了一圈沒(méi)看到好用的，自己判斷一下吧，順便分享給大家。
2. 其實(shí)也就是判斷到底是上下左右哪個(gè)方向的滑動(dòng)啦。
3. 話說(shuō)，我寫這個(gè)的時(shí)候，到底是滑動(dòng)，還是劃動(dòng)，這兩個(gè)詞糾結(jié)了好久~

1. 在wxml文件中綁定事件

綁定三個(gè)事件：touchstart、touchend、touchcancel，分別對(duì)應(yīng)三個(gè)函數(shù)：touchStart、touchEnd、touchCancel

<!--pages/today/today.wxml-->
<view style="width:100%;height:100%;" 
  bind:touchstart="touchStart" 
  bind:touchend="touchEnd" 
  bind:touchcancel="touchCancel">
</view>

如圖：

image-20191230202912744.png

2. 在js文件中，對(duì)事件函數(shù)處理

2.1 在Page外部，定義參數(shù)和變量；

var minOffset = 30;//最小偏移量，低于這個(gè)值不響應(yīng)滑動(dòng)處理
var minTime = 60;// 最小時(shí)間，單位：毫秒，低于這個(gè)值不響應(yīng)滑動(dòng)處理
var startX = 0;//開始時(shí)的X坐標(biāo)
var startY = 0;//開始時(shí)的Y坐標(biāo)
var startTime = 0;//開始時(shí)的毫秒數(shù)

如圖：

image-20191230202947501.png

2.2 觸摸開始事件，初始化startX、startY和startTime；

這里主要是在手指剛觸摸的屏幕的時(shí)候，獲取最初的x、y坐標(biāo)。我們把這個(gè)當(dāng)做初始坐標(biāo)。

/**
   * 觸摸開始事件，初始化startX、startY和startTime
   */
  touchStart: function (e) {
    console.log('touchStart', e)
    startX = e.touches[0].pageX; // 獲取觸摸時(shí)的x坐標(biāo)  
    startY = e.touches[0].pageY; // 獲取觸摸時(shí)的x坐標(biāo)
    startTime = new Date().getTime();//獲取毫秒數(shù)
  },

如圖：

image-20191230203015369.png

2.3 觸摸取消事件

觸摸取消事件：手指觸摸動(dòng)作被打斷，如來(lái)電提醒，彈窗。

當(dāng)觸摸事件被取消中斷的時(shí)候，要重置startX、startY、startTime三個(gè)的數(shù)值。

/**
   * 觸摸取消事件 （手指觸摸動(dòng)作被打斷，如來(lái)電提醒，彈窗），要將startX、startY和startTime重置
   */
  touchCancel: function (e) {
    startX = 0;//開始時(shí)的X坐標(biāo)
    startY = 0;//開始時(shí)的Y坐標(biāo)
    startTime = 0;//開始時(shí)的毫秒數(shù)
  },

如圖：

image-20191230203056924.png

2.4 觸摸結(jié)束事件，主要的判斷在這里；

注：這里注釋較多，為了便于理解，強(qiáng)迫癥可以刪掉。

簡(jiǎn)單畫了個(gè)分析手勢(shì)類型的表格，便于理解。

js代碼如下：

  /**
   * 觸摸結(jié)束事件，主要的判斷在這里
   */
  touchEnd: function (e) {
    console.log('touchEnd', e)
    var endX = e.changedTouches[0].pageX;
    var endY = e.changedTouches[0].pageY;
    var touchTime = new Date().getTime() - startTime;//計(jì)算滑動(dòng)時(shí)間
    //開始判斷
    //1.判斷時(shí)間是否符合
    if (touchTime >= minTime) {
      //2.判斷偏移量：分X、Y
      var xOffset = endX - startX;
      var yOffset = endY - startY;
      console.log('xOffset', xOffset)
      console.log('yOffset', yOffset)
      //①條件1（偏移量x或者y要大于最小偏移量）
      //②條件2（可以判斷出是左右滑動(dòng)還是上下滑動(dòng)）
      if (Math.abs(xOffset) >= Math.abs(yOffset) && Math.abs(xOffset) >= minOffset) {
        //左右滑動(dòng)
        //③條件3（判斷偏移量的正負(fù)）
        if (xOffset < 0) {
          console.log('向左滑動(dòng)')
        } else {
          console.log('向右滑動(dòng)')
        }
      } else if (Math.abs(xOffset) < Math.abs(yOffset) && Math.abs(yOffset) >= minOffset) {
        //上下滑動(dòng)
        //③條件3（判斷偏移量的正負(fù)）
        if (yOffset < 0) {
          console.log('向上滑動(dòng)')
        } else {
          console.log('向下滑動(dòng)')
        }
      }
    } else {
      console.log('滑動(dòng)時(shí)間過(guò)短', touchTime)
    }
  },

如圖：

image-20191230203123188.png

3. 測(cè)試滑動(dòng)

嘗試滑動(dòng)，查看控制臺(tái)。

如圖：

image-20191230203250133.png

至此，在微信小程序中，簡(jiǎn)單的手勢(shì)滑動(dòng)我們就已經(jīng)實(shí)現(xiàn)了。然后我把這個(gè)應(yīng)用到了我的小程序里邊，用來(lái)判斷滑動(dòng)切換每日句子，感興趣可以看下效果。體驗(yàn)地址：

小程序碼