在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

了解過微信小程序手勢滑動嗎？

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

index.js:


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

Page({

// 觸摸開始事件  
  touchStart: function (e) {
    touchStartX = e.touches[0].pageX; // 獲取觸摸時的原點  
    touchStartY = e.touches[0].pageY; // 獲取觸摸時的原點  
    // 使用js計時器記錄時間    
    interval = setInterval(function () {
      time++;
    }, 100);
  },
  // 觸摸移動事件  
  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) {// 上下
      // 向上滑動
      if (touchMoveY - touchStartY <= -30 && time < 10) {
        console.log("向上滑動")
      }
      // 向下滑動  
      if (touchMoveY - touchStartY >= 30 && time < 10) {
        console.log('向下滑動 ');
      }
    }else {// 左右
      // 向左滑動
      if (touchMoveX - touchStartX <= -30 && time < 10) {
        console.log("左滑頁面")
      }
      // 向右滑動  
      if (touchMoveX - touchStartX >= 30 && time < 10) {
        console.log('向右滑動');
      }
    }
    clearInterval(interval); // 清除setInterval  
    time = 0;
  },  
})

作者：Vam的金豆之路

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

我的微信：maomin9761

微信公眾號：前端歷劫之路