vue滚动到底部加载更多

你可以使用Vue的`@scroll`监听滚动事件，然后在滚动到底部时触发加载更多的方法。具体实现步骤如下：

1. 在需要滚动加载的元素上绑定`@scroll`事件。

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <!-- 这里是滚动内容 -->
  </div>
</template>

2. 在Vue实例中定义`handleScroll`方法，用来监听滚动事件。

<script>
export default {
  methods: {
    handleScroll() {
      const container = this.$el.querySelector('.scroll-container')
      const { scrollTop, offsetHeight, scrollHeight } = container

      // 判断是否滚动到了底部
      if (scrollTop + offsetHeight >= scrollHeight) {
        // 触发加载更多的方法
        this.loadMore()
      }
    },

    loadMore() {
      // 加载更多的逻辑
    }
  }
}
</script>

3. 在`loadMore`方法中实现加载更多的逻辑，比如发送请求获取数据并追加到滚动内容中。

<script>
export default {
  data() {
    return {
      list: [], // 列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页数量
    }
  },

  methods: {
    async loadMore() {
      const { list, page, pageSize } = this

      // 发送请求获取数据
      const res = await fetch(`/api/list?page=${page}&pageSize=${pageSize}`)
      const data = await res.json()

      // 将新数据追加到列表中
      this.list = [...list, ...data]

      // 增加页码
      this.page++
    }
  }
}
</script>

这样就可以实现滚动到底部加载更多的功能了。