移动端判断手指的滑动方向

<template>
  <view class="list-page">
    <!-- @touchstart触摸开始，多点触控，后面的手指同样会触发；   @touchmove 触摸点改变滑动时； touchend触摸结束，手指离开屏幕时；-->
      <text  @touchstart="handletouchstart" @touchend="handletouchend"  @touchmove="handletouchmove" class="demo1" v-for="(item,index) in arrList" :key="index">
        {{ item.cont}}-{{text}}=={{cont}}
      </text>
    <add-cricle-btn v-if="showFlag"></add-cricle-btn> 
  </view>
</template>
<script>

<script>
  import  cricleBtn from "../../components/add-cricle-btn.vue"
  export default {
    data() {
      return {
        arrList:[
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"},
          {cont:"13123"}
        ],
        flag: 0,
        text: '',
        lastX: 0,
        lastY: 0,
        cont:"",
        showFlag:true,
      }
    },
    methods: {
      // 接触点改变，滑动时
      handletouchmove: function(event) {
            if (this.flag !== 0) {
              return;
            }
            this.cont="覆膜开始"
            console.log(event)
            let currentX = event.touches[0].pageX;
            let currentY = event.touches[0].pageY;
            let tx = currentX - this.lastX;
            let ty = currentY - this.lastY;
            let text = '';
            this.mindex = -1;
            //左右方向滑动
            if (Math.abs(tx) > Math.abs(ty)) {
              if (tx < 0) {
                text = '向左滑动';
                this.flag = 1;
              } else if (tx > 0) {
                text = '向右滑动';
                this.flag = 2;
              }
            }
            //上下方向滑动
            else {
              if (ty < 0) {
                text = '向上滑动';
                this.flag = 3;
                this.showFlag=false;
              } else if (ty > 0) {
                text = '向下滑动';
                this.flag = 4;
                this.showFlag=true;
              }
            }
            //将当前坐标进行保存以进行下一次计算
            this.lastX = currentX;
            this.lastY = currentY;
            this.text = text;
          },
          // 开始滑动
          handletouchstart: function(event) {
            this.lastX = event.touches[0].pageX;
            this.lastY = event.touches[0].pageY;
          },
          // 滑动结束结束
          handletouchend: function(event) {
            this.flag = 0;
            // this.text = '没有滑动';
          },
    },
    components:{
      'add-cricle-btn':cricleBtn
    }
  }
</script>

<style scoped>
  .list-page{
    display: flex;
    flex-direction: column;
  }
  .demo1{
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: lightpink;
    font-size: 30rpx;
    border-bottom: 1px solid lightpink;
  }
</style>