uniapp 实现 下拉分页加载数据

在 Uniapp 中实现下拉分页加载数据，可以通过以下步骤：

1. 首先，在页面中引入下拉刷新组件和分页加载组件。

<template>
  <view>
    <list
      :finished="finished"
      @load="loadData"
    >
      <refresh refresher-triggered="onRefresh">
        <!-- 下拉刷新的内容 -->
      </refresh>
      <cell v-for="(item, index) in dataList" :key="index">
        <!-- 显示数据项的内容 -->
      </cell>
      <loading v-if="loading"></loading>
    </list>
  </view>
</template>

2. 在页面的 `data` 中定义数据相关的变量，如 `dataList` 用于存储加载的数据，`loading` 用于标识数据加载中，`finished` 用于标识是否已加载完所有数据。

export default {
  data() {
    return {
      dataList: [],
      loading: false,
      finished: false,
    };
  },
  // ...
};

3. 实现下拉刷新和分页加载的方法。

export default {
  // ...
  methods: {
    // 下拉刷新
    onRefresh() {
      // 清空数据列表
      this.dataList = [];
      // 重置加载状态
      this.finished = false;
      // 加载数据
      this.loadData();
    },
    // 分页加载
    loadData() {
      if (this.loading || this.finished) return;
      this.loading = true;
      // 发起网络请求获取数据
      // 假设每页加载 10 条数据
      // 模拟异步请求延迟
      setTimeout(() => {
        // 模拟请求成功
        const newData = [...]; // 新加载的数据
        if (newData.length > 0) {
          this.dataList = this.dataList.concat(newData);
        } else {
          this.finished = true; // 数据已加载完
        }
        this.loading = false;
      }, 1000);
    },
  },
};

以上是一个简单的示例，实现了下拉刷新和分页加载数据的功能。当用户下拉刷新页面时，会触发 `onRefresh` 方法，清空数据并重新加载；当用户滚动到列表底部时，会触发 `loadData` 方法，加载更多数据并追加到列表中。你可以根据你的实际需求进行修改和优化。