了解過微信小程序手勢(shì)滑動(dòng)嗎？

wxml:
<view
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd" >
</view>

index.js:


var touchStartX = 0;//觸摸時(shí)的原點(diǎn)  
var touchStartY = 0;//觸摸時(shí)的原點(diǎn)  
var time = 0;// 時(shí)間記錄，用于滑動(dòng)時(shí)且時(shí)間小于1s則執(zhí)行左右滑動(dòng)  
var interval = "";// 記錄/清理時(shí)間記錄  
var touchMoveX = 0; // x軸方向移動(dòng)的距離
var touchMoveY = 0; // y軸方向移動(dòng)的距離

Page({

// 觸摸開始事件  
  touchStart: function (e) {
    touchStartX = e.touches[0].pageX; // 獲取觸摸時(shí)的原點(diǎn)  
    touchStartY = e.touches[0].pageY; // 獲取觸摸時(shí)的原點(diǎn)  
    // 使用js計(jì)時(shí)器記錄時(shí)間    
    interval = setInterval(function () {
      time++;
    }, 100);
  },
  // 觸摸移動(dòng)事件  
  touchMove: function (e) {
    touchMoveX = e.touches[0].pageX;
    touchMoveY = e.touches[0].pageY;
  },
  // 觸摸結(jié)束事件  
  touchEnd: function (e) {
    var moveX = touchMoveX - touchStartX
    var moveY = touchMoveY - touchStartY
    if (Math.sign(moveX) == -1) {
      moveX = moveX * -1
    }
    if (Math.sign(moveY) == -1) {
      moveY = moveY * -1
    }
    if (moveX <= moveY) {// 上下
      // 向上滑動(dòng)
      if (touchMoveY - touchStartY <= -30 && time < 10) {
        console.log("向上滑動(dòng)")
      }
      // 向下滑動(dòng)  
      if (touchMoveY - touchStartY >= 30 && time < 10) {
        console.log('向下滑動(dòng) ');
      }
    }else {// 左右
      // 向左滑動(dòng)
      if (touchMoveX - touchStartX <= -30 && time < 10) {
        console.log("左滑頁面")
      }
      // 向右滑動(dòng)  
      if (touchMoveX - touchStartX >= 30 && time < 10) {
        console.log('向右滑動(dòng)');
      }
    }
    clearInterval(interval); // 清除setInterval  
    time = 0;
  },  
})






作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路