uniapp 实现 下拉分页加载数据

你可以使用 uniapp 的下拉刷新组件和列表组件来实现下拉分页加载数据的功能。下面是一个简单的示例代码：

首先，在页面的 template 中添加下拉刷新和列表组件：

<template>
  <view>
    <scroll-view scroll-y="true" @scrolltolower="loadMore">
      <refresh refresher-triggered="refreshData">
        <view class="list">
          <view v-for="(item, index) in dataList" :key="index" class="item">
            <!-- 显示数据项的内容 -->
          </view>
        </view>
      </refresh>
    </scroll-view>
  </view>
</template>

然后，在页面的 script 中定义相关的数据和方法：

<script>
export default {
  data() {
    return {
      dataList: [], // 存储加载的数据列表
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页显示的数据数量
      isLoading: false, // 是否正在加载数据
    };
  },
  methods: {
    // 下拉刷新数据
    refreshData() {
      this.pageNum = 1;
      this.dataList = [];
      this.loadData();
    },
    // 加载更多数据
    loadMore() {
      if (this.isLoading) return;
      this.pageNum++;
      this.loadData();
    },
    // 请求加载数据
    loadData() {
      this.isLoading = true;
      // 发起请求，获取第 pageNum 页的数据
      // 可以使用 uni.request 或 uni.$http 等方法发送网络请求
      // 请求成功后将返回的数据添加到 dataList 中，如 this.dataList.push(...response.data)
      // 请求完成后，记得设置 this.isLoading = false;
    },
  },
};
</script>

在上面的代码中，`refreshData` 方法用于下拉刷新数据，会重置页码和数据列表，然后调用 `loadData` 方法加载第一页的数据。`loadMore` 方法用于触底加载更多数据，会增加页码并调用 `loadData` 方法加载下一页的数据。`loadData` 方法中可以使用 uni.request 或 uni.$http 等方法发送网络请求，成功后将返回的数据添加到 dataList 中，并在请求完成后设置 isLoading 为 false。

这样，当用户下拉刷新或触底时，就会触发相应的方法来加载新的数据，实现下拉分页加载数据的功能。你可以根据实际情况进行相应的修改和优化。希望对你有帮助！