UniApp自定义滑动触摸组件开发指南：H5/小程序/App全端兼容

作者：交互手记时间：2026-10-30 23:37:27浏览：335

本文详细介绍在UniApp项目中开发自定义滑动触摸组件的方法，涵盖H5、微信小程序及App端的全平台兼容实现。通过解析touchstart、touchend等核心事件，结合pageX/clientY坐标计算滑动方向，提供完整的Vue组件代码示例，包括模板、样式及逻辑处理，帮助开发者快速实现上拉、下拉、左右滑动等交互效果。

准备工作

在APP日常开发中，上拉刷新、下拉刷新、左右滑动及触底加载等交互效果十分常见。本文将深入解析这些效果的实现原理，并重点介绍如何构建一个自定义滑动触摸组件。该方案旨在实现跨平台兼容，支持网页H5端、微信小程序以及原生App端。

在components目录下新建一个q-swiper文件夹，并在其中创建一个名为q-swiper.vue的组件文件。
依据前文所述的页面结构规范，编写完成预定的滑动触摸页面布局。

原理分析

自定义滑动触摸组件的核心逻辑在于通过常规方法计算手指或鼠标在屏幕上滑动的上下左右距离，进而触发相应的滑动效果。

实现该功能主要依赖ontouchstart、ontouchend、onmousedown以及onmouseup这几个关键事件。

系统通过监听pageX、pageY、clientX和clientY这些坐标属性值的变化，来判断用户的滑动方向，从而执行对应的滑动功能。

组件实现

在完成准备工作与原理分析后，接下来将编写一个简易的自定义滑动模块组件。

模板部分

<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]);
  }
}

实战演练

完成滑动组件的开发后，即可在H5、小程序和App环境中调用。以下展示页面模板及脚本的具体使用方法。

模板使用

<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;
}

案例展示

h5 端效果

准备工作

小程序端效果

准备工作

APP 端效果

准备工作

最后

以上即为自定义滑动触摸组件的核心内容。如需了解更多关于UniApp项目中自定义滑动触摸组件的详细信息，敬请关注本站发布的其他相关文章。

作者最新文章

JS怎么实现页面强制刷新

2026-11-05 14:53:38

点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法

2026-11-05 12:12:23

怎么封装一个通用的JS创建元素辅助函数

2026-11-05 11:41:41

Swiper.js 怎么监听滑动结束并获取当前索引

2026-11-05 10:57:15

HTML、CSS和JS的关系：Web前端三件套怎么协作

2026-11-04 15:41:40