uniapp项目实践自定义滑动触摸组件实现示例

<view
  class="q-swiper"
  @touchstart="handlerStart"
  @touchend="handlerEnd"
  @mousedown="handlerStart"
  @mouseup="handlerEnd">
  <slot name="content">
    <!-- 插槽自定义内容 -->
  </slot>
</view>

.q-swiper {
  width: 100%;
  height: 100%;
}

import { reactive } from "vue";
// 滑动信息
const touchInfo = reactive({
  touchX: "",
  touchY: "",
});
// 滑动类型
const touchTypes = reactive({
  left: {
    id: 1,
    name: "左滑",
    val: "left",
  },
  right: {
    id: 2,
    name: "右滑",
    val: "right",
  },
  up: {
    id: 3,
    name: "上滑",
    val: "up",
  },
  down: {
    id: 4,
    name: "下滑",
    val: "down",
  },
});
// 发送事件
const emits = defineEmits(["change"]);

// 滑动开始
function handlerStart(e) {
  let { clientX, clientY } = e.changedTouches[0];
  touchInfo.touchX = clientX;
  touchInfo.touchY = clientY;
}
// 滑动结束
function handlerEnd(e) {
  let { clientX, clientY } = e.changedTouches[0];
  let diffX = clientX - touchInfo.touchX,
    diffY = clientY - touchInfo.touchY,
    absDiffX = Math.abs(diffX),
    absDiffY = Math.abs(diffY),
    type = "";
  if (absDiffX > 50 && absDiffX > absDiffY) {
    type = diffX >= 0 ? "right" : "left";
  }
  if (absDiffY > 50 && absDiffX < absDiffY) {
    type = diffY < 0 ? "up" : "down";
  }
  if (type) {
    console.log("滑动信息：", touchTypes[type]);
    emits("change", touchTypes[type]);
  }
}

<q-swiper @change="changeSwiper">
  <template v-slot:content>
    <view class="swiper-box"> 滑动方向：{{ swiperDir.name }} </view>
    <view
      :class="{'swiper-section': true, [swiperDir.val != 'click' ? swiperDir.val : '']: true}"></view>
  </template>
</q-swiper>

.swiper-box {
  padding: 30rpx;
  font-size: 24rpx;
}
.swiper-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f99;
  opacity: 0.8;
  transition: all 0.5s;
  &.up {
    transform: translateX(0) translateY(-100%);
  }
  &.down {
    transform: translateX(0) translateY(0);
  }
  &.left {
    transform: translateX(0) translateY(0);
  }
  &.right {
    transform: translateX(100%) translateY(0);
  }
}

// 导入依赖
import { reactive } from "vue";
// 滑动方向
let swiperDir = reactive({
  name: "左滑",
  val: "left",
});

// 监听事件
function changeSwiper(dir) {
  swiperDir.name = dir.name;
  swiperDir.val = dir.val;
}