vue上拉加载更多数据

要实现Vue上拉加载更多数据，可以使用以下步骤：

1. 在Vue组件中添加一个数据列表，并设置一个初始的数据量，例如：

data() {
  return {
    dataList: [],
    pageSize: 10,
    pageNum: 1
  }
}

2. 在模板中添加一个监听滚动事件的元素，并绑定一个滚动事件处理函数：

<div class="scroll-container" @scroll="handleScroll">
  <!-- 数据列表 -->
</div>

3. 在滚动事件处理函数中，判断滚动条是否到达底部，如果到达底部，则请求下一页数据并将数据添加到数据列表中：

handleScroll() {
  // 获取滚动容器元素
  const container = document.querySelector('.scroll-container')
  // 如果滚动到底部
  if (container.scrollHeight - container.scrollTop === container.clientHeight) {
    // 请求下一页数据
    this.pageNum++
    // 发送请求，获取数据
    fetchData(this.pageNum, this.pageSize).then((data) => {
      // 将数据添加到数据列表中
      this.dataList = [...this.dataList, ...data]
    })
  }
}

4. 在fetchData函数中，发送请求获取数据，例如：

function fetchData(pageNum, pageSize) {
  return axios.get('/api/data', {
    params: {
      pageNum,
      pageSize
    }
  }).then((res) => {
    return res.data
  })
}

5. 最后，在模板中使用v-for指令渲染数据列表，例如：

<div class="scroll-container" @scroll="handleScroll">
  <div v-for="item in dataList" :key="item.id">{{item.title}}</div>
</div>

这样就可以实现Vue上拉加载更多数据了。