vue手写上下滑动组件

好的，我可以为你展示一个简单的 Vue 上下滑动组件的代码。下面是一个示例：

<template>
  <div class="scrollable-container" ref="container" @scroll="handleScroll">
    <div class="scrollable-content">
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll() {
      const container = this.$refs.container;
      // 检查滚动位置
      if (container.scrollTop === 0) {
        // 到达顶部
        console.log('到达顶部');
      } else if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
        // 到达底部
        console.log('到达底部');
      }
    }
  }
};
</script>

<style>
.scrollable-container {
  height: 300px;
  overflow-y: scroll;
}

.scrollable-content {
  height: 1000px;
}
</style>

在这个示例中，我们创建了一个名为 `scrollable-container` 的容器，并在容器上监听滚动事件。通过获取容器的 `scrollTop`、`clientHeight` 和 `scrollHeight` 属性，我们可以判断滚动位置是否到达顶部或底部。你可以根据你的需求修改样式和添加具体的滚动逻辑。希望这个示例能对你有所帮助！