vue下拉刷新加载下一页

在Vue.js中实现下拉刷新加载更多内容通常涉及到两个核心组件：`v-loading`（用于显示加载状态）和`infinite-scroll`（用于处理滚动事件并触发数据的分页加载）。以下是简单的步骤：

1. 首先，在你的组件模板里引入这两个依赖库，例如使用Element UI提供的`el-loading`：

<template>
  <div ref="listContainer">
    <!-- ... -->
    <div v-if="isLoading" class="loading">正在加载...</div>
    <ul infinite-scroll :trigger="loadMore" :distance="200">
      <!-- 你的列表项 -->
    </ul>
  </div>
</template>

2. 定义必要的数据状态和方法：

<script>
export default {
  data() {
    return {
      items: [], // 存放已加载的数据
      isLoading: false, // 加载状态标志
      page: 1, // 当前页面
      perPage: 10, // 每页加载的数量
    };
  },
  methods: {
    loadMore() {
      if (!this.isLoading && this.page < MAX_PAGES) { // 判断是否还有未加载的页面
        this.isLoading = true; // 设置加载状态
        // 发起网络请求加载下一页数据
        axios.get('/api/data?page=' + (this.page + 1))
          .then(response => {
            this.items.concat(response.data); // 将新数据追加到现有列表
            this.page++; // 更新当前页码
            this.isLoading = false; // 数据加载完成，设置加载状态为false
          })
          .catch(error => {
            console.error('Error loading more data:', error);
          });
      }
    },
  },
};
</script>

3. 上述代码中，当用户滚动到底部时（通过`infinite-scroll`监听），会触发`loadMore`方法。这个方法会在每次调用时发送一个GET请求，参数包含当前页数，然后将返回的新数据合并到现有的`items`数组。