今天项目有需要，要达到类似抖音那种上下滑动的切换效果，于是我就研究了一下。思路是监听手指触摸的开始点，和结束点，然后对比。

有两种解决方案：

第1种方式，

WXML：

<view class='btn'  bindtouchstart='touchStart' 
bindtouchmove='touchMove' bindtouchend='touchEnd'>
OK
</view>

WXSS:

.btn{
    width: 400rpx;
    height: 100rpx;
    background: red;
}

JS：

//index.js
//获取应用实例
const app = getApp()

Page({
    data: {
        touchS: [0, 0],
        touchE: [0, 0]
    },

    touchStart: function (e) {
        // console.log(e.touches[0].pageX)
        let sx = e.touches[0].pageX
        let sy = e.touches[0].pageY
        this.data.touchS = [sx, sy]
    },
    touchMove: function (e) {
        let sx = e.touches[0].pageX;
        let sy = e.touches[0].pageY;
        this.data.touchE = [sx, sy]
    },
    touchEnd: function (e) {
        let start = this.data.touchS
        let end = this.data.touchE
        console.log(start)
        console.log(end)
        if (start[0] < end[0] - 50) {
            console.log('右滑')
        } else if (start[0] > end[0] + 50) {
            console.log('左滑')
        } else {
            console.log('静止')
        }
    },

})

这是运行结果：

可以正常使用

第2种方式我贴出来吧，查到的，但是不能用，因为小程序在函数外不能声明变量吧，声明在某一个函数里，另一个又访问不到。绑定一个事件又无法监听，开始点击和结束点击的位置了。

有大佬知道的话请告诉我，感谢。

步奏: 添加两个事件(手指按下时,手指松开时)

bindtouchstart="touchStart" //开始
bindtouchend="touchEnd"//结束

wxml

<view bindtouchstart="touchStart" bindtouchend="touchEnd" >
11111111111
</view>

wjs:

let touchDotX = 0;//X按下时坐标
let touchDotY = 0;//y按下时坐标
let interval;//计时器
let time = 0;//从按下到松开共多少时间*100
// 触摸开始事件
  touchStart: function(e) {
    touchDotX = e.touches[0].pageX; // 获取触摸时的原点
    touchDotY = e.touches[0].pageY;
    // 使用js计时器记录时间    
    interval = setInterval(function() {
      time++;
    }, 100);
  },
  // 触摸结束事件
  touchEnd: function(e) {
    let touchMoveX = e.changedTouches[0].pageX;
    let touchMoveY = e.changedTouches[0].pageY;
    let tmX = touchMoveX - touchDotX;
    let tmY = touchMoveY - touchDotY;
    if (time < 20) {
      let absX = Math.abs(tmX);
      let absY = Math.abs(tmY);
      if (absX > 2 * absY) {
        if (tmX<0){
          console.log("左滑=====")
        }else{
          console.log("右滑=====")
        }
      }
      if (absY > absX * 2 && tmY<0) {
        console.log("上滑动=====")
      }
    }
    clearInterval(interval); // 清除setInterval
    time = 0;
  }

我用的第1种