Vue3中js点上下按钮击上下滑动

在Vue3中，你可以使用事件监听和滚动处理来实现点击上下按钮进行滑动的效果。以下是一个简单的示例代码：

1. 首先，在你的Vue组件中，定义一个变量来保存滚动的位置：

data() {
  return {
    scrollPosition: 0
  }
}

2. 接下来，你可以在组件的模板中添加上下按钮，并绑定点击事件：

<template>
  <div>
    <button @click="scrollUp">上</button>
    <button @click="scrollDown">下</button>
    <div ref="scrollContainer" class="scroll-container">
      <!-- 滚动内容 -->
    </div>
  </div>
</template>

3. 在Vue组件的方法中，实现点击按钮时的滚动逻辑：

methods: {
  scrollUp() {
    const container = this.$refs.scrollContainer;
    this.scrollPosition -= 100; // 每次向上滚动100px，可以根据需要进行调整
    container.scrollTo({
      top: this.scrollPosition,
      behavior: 'smooth' // 添加平滑滚动效果
    });
  },
  scrollDown() {
    const container = this.$refs.scrollContainer;
    this.scrollPosition += 100; // 每次向下滚动100px，可以根据需要进行调整
    container.scrollTo({
      top: this.scrollPosition,
      behavior: 'smooth' // 添加平滑滚动效果
    });
  }
}

以上代码中，通过 `this.$refs.scrollContainer` 获取到滚动容器元素，并使用 `scrollTo` 方法来滚动到指定位置。点击上按钮时，滚动位置减少，点击下按钮时，滚动位置增加。

注意：你需要根据实际情况修改代码中的样式、滚动距离和滚动容器的选择器等。