1、源碼

<!--
 * @Descripttion: 菜單名稱
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2023-03-09 10:40:45
 * @LastEditors: PengShuai
 * @LastEditTime: 2023-03-09 11:16:51
-->
<template>
  <div class="touch-btn">
    <div
      @touchstart="touchStart($event)"
      @touchmove="touchMove($event)"
      @touchend="touchEnd($event)"
      class="btn-box"
      :class="status ? 'left' : 'right'"
    >
      按鈕
    </div>
  </div>
</template>

<script>
export default {
  name: 'touch-btn',
  data() {
    return {
      // 滑動(dòng)狀態(tài) 判斷左滑還是右滑
      status: false,
      // 判斷是否觸發(fā)滑動(dòng)
      flag: false,
      // 開始位置
      startX: 0,
      // 結(jié)束位置
      endX: 0,
    }
  },
  methods: {
    // 觸摸屏幕時(shí)候觸發(fā)
    touchStart(e) {
      this.flag = true
      this.startX = e.touches[0].clientX
    },
    // 滑動(dòng)時(shí)觸發(fā)
    touchMove(e) {
      if (this.flag) {
        const moveX = this.endX + (e.touches[0].clientX - this.startX)
        console.log(moveX)
      }
    },
    // 結(jié)束時(shí)觸發(fā)
    touchEnd(e) {
      if (this.flag) {
        this.flag = false
        const moveX = e.changedTouches[0].clientX - this.startX
        if (moveX < 0) {
          //向左滑動(dòng)
          this.status = true
        } else if (moveX > 0) {
          //向右滑動(dòng)
          this.status = false
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
.btn-box {
  border: 1px solid red;
  position: fixed;
  top: 40%;
  padding: 10px 20px;
  transition: all 0.5s;
}
.right {
  right: -60px;
}
.left {
  right: 0px;
}
</style>

2、實(shí)例-滑動(dòng)隱藏顯示（默認(rèn)隱藏）