vue3pc端横向拉动

对于 Vue 3 PC 端横向拉动，你可以使用 Vue 自带的指令 v-scroll 来实现。

首先，在需要横向拉动的容器上添加一个滚动容器的类名，例如 "scroll-container"。然后，在 Vue 的模板中，使用 v-scroll 指令绑定一个滚动事件监听器，并在事件处理函数中进行横向滚动的操作。具体的代码如下：

<template>
  <div class="scroll-container" v-scroll="handleScroll">
    <!-- 在这里放置你的横向滚动内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(e) {
      // 获取滚动容器的 DOM 元素
      const container = e.target;
      // 获取当前滚动的距离
      const scrollLeft = container.scrollLeft;

      // 在这里可以根据滚动距离来进行一些操作，例如改变样式或触发其他事件
      // ...

      // 如果需要获取滚动容器的宽度，可以使用 container.offsetWidth

      // 如果需要获取滚动内容的宽度，可以使用 container.scrollWidth
    },
  },
};
</script>

<style>
.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
}
</style>

通过以上代码，当你在滚动容器上进行横向滚动时，会触发 handleScroll 方法，并且可以在方法中获取到当前滚动的距离。你可以在该方法中进行相应的操作，例如改变样式或触发其他事件。

希望这个解决方案能够帮助到你！如果还有其他问题，请随时提问。