usky-web-pad/src/components/oa-touch/index.vue

<template>
  <view @touchstart="fingerstart" @touchend="fingerend">
    <slot name="content"> </slot>
  </view>
</template>

<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance, toRefs } from "vue";

const emit = defineEmits(["touchChange"]);
const props = defineProps({});
const {} = toRefs(props);

const startData = ref({
  clientX: "",
  clientY: "",
});
const updDistance = ref(100);
const lrDistance = ref(50);
const topMed = ref("");
const bottomMed = ref("");
const leftMed = ref("");
const rightMed = ref("");

/**
 * @当按下去的时候
 */
function fingerstart(e) {
  // 记录 距离可视区域左上角 左边距 和 上边距
  startData.value.clientX = e.changedTouches[0].clientX;
  startData.value.clientY = e.changedTouches[0].clientY;
}

/**
 * @当抬起来的时候
 */
function fingerend(e) {
  // 当前位置 减去 按下位置 计算 距离
  const subX = e.changedTouches[0].clientX - startData.value.clientX;
  const subY = e.changedTouches[0].clientY - startData.value.clientY;
  if (subY > updDistance.value || subY < -updDistance.value) {
    if (subY > updDistance.value) {
      bottomscroll(subY);
    } else if (subY < -updDistance.value) {
      topscroll(subY);
    }
  } else {
    if (subX > lrDistance.value) {
      rightscroll(subX);
    } else if (subX < -lrDistance.value) {
      leftscroll(subX);
    } else {
      console.log("无效操作");
    }
  }
}
/**
 * @上滑触发
 */
function topscroll(dista) {
  topMed.value ? (topMed.value = dista) : (topMed.value = null);
  // console.log("触发了上滑方法!");
  emit("change", "上滑");
}
/**
 * @下滑触发
 */
function bottomscroll(dista) {
  bottomMed.value ? (bottomMed.value = dista) : (bottomMed.value = null);
  // console.log("触发了下滑方法!");
  emit("change", "下滑");
}
/**
 * @右滑触发
 */
function rightscroll(dista) {
  rightMed.value ? (rightMed.value = dista) : (rightMed.value = null);
  // console.log("触发了右滑方法!");
  emit("change", "右滑");
}
/**
 * @左滑触发
 */
function leftscroll(dista) {
  leftMed.value ? (leftMed.value = dista) : (leftMed.value = null);
  // console.log("触发了左滑方法!");
  emit("change", "左滑");
}
</script>