在 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({<