uniapp子组件使用u-loadmore 触底加载

UniApp 中的 u-loadmore 是一个轻量级的下拉刷新和加载更多组件，适用于列表类型的场景。如果你想在子组件中使用它实现触底加载，可以按照以下步骤操作：

1. **安装依赖**：
首先，确保你在项目的 `uni-app` 的 `components` 目录下安装了 `u-loadmore` 组件。你可以通过命令行工具运行 `npm install u-loadmore` 或者在配置文件 `package.json` 中添加依赖。

2. **导入并使用**：
在子组件的 `.vue` 文件里，引入 `u-loadmore` 组件：

   <template>
     <view>
       <!-- ...其他内容 -->
       <u-loadmore :show-loading="isLoading" @load-more="loadMoreData" />
     </view>
   </template>

   <script>
   import { loadmore } from '@vant/weapp/u-loadmore';

   export default {
     components: {
       ULoadmore: {
         name: 'ULoadmore',
         props: ['showLoading', 'loadMoreFn'],
         methods: {
           async loadMoreData() {
             // 这里是你实际的加载数据方法，比如从API获取更多数据
             const newData = await yourApiCall();
             
             if (newData.length > 0) {
               this.$emit('load-more-finish', newData); // 通知父组件数据已加载完成
             } else {
               this.isLoading = false; // 如果没有更多数据，停止加载动画
             }
           },
         },
       },
     },
     data() {
       return {
         isLoading: false,
       };
     },
   };
   </script>

3. **父组件通信**：
父组件需要监听 `load-more-finish` 事件来处理加载更多的结果，并更新界面状态：

   <template>
     <your-child-component @load-more-finish="handleLoadMoreFinish"></your-child-component>
   </template>

   <script>
   export default {
     methods: {
       handleLoadMoreFinish(newData) {
         this.listData.push(...newData); // 将新数据追加到已有列表数据中
         this.$refs.loadmore.finish(); // 告诉 u-loadmore 结束加载
       },
     },
   };
   </script>