【记录】Vue3移动端手势滑动封装

1、Hooks封装

import { ref } from 'vue';
import linkHooks from '@/hooks/linkTo';

/* 参数1：左边路由；参数2：右边路由；参数3：绑定的DOM元素 */
export default function(left,right,dom){
   const [flag, startX, endX,isshow] = [ref(false), ref(0), ref(0),ref(false)]
   const { linkTo } = linkHooks()

   function start(e) {  //记录开始滑动屏幕的X轴的位置
      flag.value = true;
      startX.value = e.touches[0].clientX;
      endX.value = dom.value.offsetLeft;
   }

   function end(e) {
      if (flag.value) {
         flag.value = false;
         const moveX = e.changedTouches[0].clientX - startX.value;  //计算滑动的距离
         if (moveX < -80) {
            isshow.value = true;
            linkTo(right)
         } else if (moveX > 80) {
            isshow.value = true;
            linkTo(left)
         }
      }
   }

   return {
      start,
      end,
   }
}

2、组件中使用

<script setup>
import slideHooks from '@/hooks/slide';
const { start,end } = slideHooks('Separation','meeting',destroy)
</script>

<template>
 <div class="meeting width" ref="destroy" @touchstart="start($event)" @touchend="end($event)"></div>
</template>