像这种移动端的，我手指左右滑动是可以动的，但是上下滑动就不行，鼠标使用滚轮的时候是没有问题的，目前只有手指上下滑动没有反应

像这种移动端的，我手指左右滑动是可以动的，但是上下滑动就不行，鼠标使用滚轮的时候是没有问题的，目前只有手指上下滑动没有反应

处理手势事件

你这个问题可能有几种原因，先说一下我的猜测：

可能是因为在移动设备上，浏览器默认将纵向滚动作为页面滚动操作，因此需要禁用默认的滚动行为，然后在Vue组件中手动实现纵向滚动。

解决方案：

• 在需要实现纵向滚动的组件外部包裹一个div元素，并设置该div元素的overflow-y属性为scroll或auto，这将允许用户在该div元素中纵向滚动。

<div style="overflow-y: scroll;">
  <!-- Vue组件代码 -->
</div>

• 禁用默认的滚动行为。您可以在Vue组件的mounted钩子函数中添加以下代码来禁用默认的纵向滚动行为。

mounted() {
  // 禁用默认滚动行为
  document.body.style.overflowY = 'hidden';
}

• 在组件中手动实现纵向滚动。您可以在组件中监听touchstart、touchmove和touchend事件，然后根据手指移动的距离来实现纵向滚动。

参考代码：

<template>
  <div
    ref="scrollContainer"
    class="scroll-container"
    @touchstart="onTouchStart"
    @touchmove="onTouchMove"
    @touchend="onTouchEnd"
  >
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    onTouchStart(event) {
      // 记录手指初始位置
      this.startY = event.touches[0].clientY;
    },
    onTouchMove(event) {
      // 计算手指移动的距离
      const deltaY = event.touches[0].clientY - this.startY;

      // 滚动容器
      this.$refs.scrollContainer.scrollTop -= deltaY;

      // 阻止默认的纵向滚动
      event.preventDefault();
    },
    onTouchEnd(event) {
      // 清除手指初始位置
      this.startY = null;
    },
  },
};
</script>

<style scoped>
.scroll-container {
  height: 100%;
  overflow-y: auto;
}
</style>

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7579427