uniapp 子组件列表 实现触底加载

UniApp（Vue.js 开发框架）中的子组件列表实现触底加载通常通过 Vue 的生命周期钩子和滚动事件监听来完成。以下是基本步骤：

1. **设置状态**: 创建一个布尔型变量，例如 `isLoadMore`, 初始值设为 `false`，表示是否需要加载更多数据。

2. **顶部布局**: 在父组件的模板中，使用 `v-for` 循环展示子组件，并添加一个虚拟滚动区域（如 `div` 或者使用 `scroll-view` 组件），当滚动到底部时触发加载事件。

<template>
  <scroll-view :virtual="true" @scroll-bottom="loadMore">
    <template v-for="(item, index) in list" :key="index">
      <!-- 子组件的渲染 -->
      <child-component :data="item" />
    </template>
    <div v-if="isLoadMore">正在加载...</div>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      isLoadMore: false,
      list: [], // 存放子组件的数据源
    };
  },
  methods: {
    loadMore() {
      if (!this.isLoadMore && this.hasMoreData()) { // 如果还未加载过并且还有更多数据
        this.isLoadMore = true; // 设置标志为加载中
        // 加载更多数据的 API 调用
        this.loadMoreData().then(() => {
          // 数据加载成功后更新列表
          this.list.push(...newData); // newData 是从服务器获取的新数据
          this.isLoadMore = false; // 设置标志为已加载
        });
      }
    },
    hasMoreData() { // 根据实际数据判断是否有更多数据
      return /* 判断条件 */;
    },
    loadMoreData() {
      // 这里填写实际的网络请求函数
      return axios.get('/api/load-more');
    },
  },
};
</script>

3. **处理加载状态**: 在 `loadMoreData()` 函数中，你可以调用后端API获取更多数据。当数据返回后，更新 `list` 数组并清空 `isLoadMore` 标志。