uniapp 左右滑动切换Tab

各种开发会遇到很多奇葩的需求，今天这个是在页面 左右滑动，然后自动去切换Tab

   <view
      @touchstart="touchStart"
      @touchcancel="touchCancel"
      @touchend="touchEnd"
    >
      <components is="xxx"/>
    </view>

//------------------- 滑动tab -------------------
const minOffset = ref(50);
const minTime = ref(60);
const startX = ref(0);
const startY = ref(0);
const startTime = ref(0);
const touchStart = (e: any) => {
  // console.log("滑动开始", e);
  startX.value = e.touches[0].pageX; // 获取触摸时的x坐标
  startY.value = e.touches[0].pageY; // 获取触摸时的x坐标
  startTime.value = new Date().getTime(); //获取毫秒数
};
const touchCancel = (e: any) => {
  startX.value = 0; //开始时的X坐标
  startY.value = 0; //开始时的Y坐标
  startTime.value = 0; //开始时的毫秒数
};
const touchEnd = (e: any) => {
  var endX = e.changedTouches[0].pageX;
  var endY = e.changedTouches[0].pageY;
  var touchTime = new Date().getTime() - startTime.value; //计算滑动时间
  //开始判断
  //1.判断时间是否符合
  if (touchTime >= minTime.value) {
    //2.判断偏移量：分X、Y
    var xOffset = endX - startX.value;
    var yOffset = endY - startY.value;
    // console.log('xOffset', xOffset)
    // console.log('yOffset', yOffset)
    //①条件1（偏移量x或者y要大于最小偏移量）
    //②条件2（可以判断出是左右滑动还是上下滑动）
    if (
      Math.abs(xOffset) >= Math.abs(yOffset) &&
      Math.abs(xOffset) >= minOffset.value
    ) {
      //左右滑动
      //③条件3（判断偏移量的正负）
      if (xOffset < 0) {
        // console.log("向左滑动 下一页");
        tabRef.value.leftSlide();
      } else {
        // console.log("向右滑动");
        tabRef.value.rightSlide();
      }
    } else if (
      Math.abs(xOffset) < Math.abs(yOffset) &&
      Math.abs(yOffset) >= minOffset.value
    ) {
      //上下滑动
      //③条件3（判断偏移量的正负）
      if (yOffset < 0) {
        // console.log('向上滑动')
      } else {
        // console.log('向下滑动')
      }
    }
  } else {
    // console.log('滑动时间过短', touchTime)
  }
};

原文地址：https://blog.csdn.net/qq_38866594/article/details/145120350

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！