uniapp实现上拉加载并拼接数据

UniApp 实现上拉加载（Pull to Refresh）功能通常会结合 Vue 的生命周期钩子和滚动事件监听。首先，你需要设置一个状态标志来标识是否正在加载更多数据，比如 `isLoading`。当用户触发上拉动作（例如滑动到列表底部）时，你可以检查这个标志：

1. 首先，在页面的数据对象中初始化 `isLoading` 为 false 和一个用于存放数据的数组，如 `listData`。

data() {
  return {
    isLoading: false,
    listData: [],
  };
}

2. 在模板中添加一个上拉刷新区域，并绑定 `@touchstart.prevent` 事件到它上面，用于检测开始上拉动作：

<template>
  <view v-loading="isLoading" @touchstart.prevent="checkRefresh">
    <!-- ...其他内容 -->
    <refresh-region @refresh="loadMoreData">上拉加载更多</refresh-region>
  </view>
</template>

3. 在 `methods` 中创建 `checkRefresh` 和 `loadMoreData` 方法：

methods: {
  checkRefresh(e) {
    if (e.detail.scrollTop === this.$refs.refreshRegion.scrollHeight - e.detail.clientHeight && !this.isLoading) {
      this.isLoading = true;
    }
  },
  loadMoreData() {
    // 模拟异步加载数据，这里可以替换为你实际的 API 调用
    setTimeout(() => {
      this.isLoading = false; // 加载完毕后置空isLoading
      const newData = /* 获取更多数据 */; // 这里需要处理从服务器获取的数据
      this.listData.push(...newData); // 将新数据追加到已有数据数组中
    }, 2000);
  },
},

4. 当数据加载完成后，记得更新视图，这通常在 `loadMoreData` 完成后自动完成。