uni-app触底加载更多

        当用户滚动页面至底部时，会触发一个特定的生命周期钩子函数 onReachBottom，然后在这个函数内部进行网络请求以获取下一页或更多数据。

首先需要在page.json中配置

{
    "path":"pages/index/index",
    "style":{
		"navigationBarTitleText":"首页",
		"onReachBottomDistance": 60 
	}
}

<template>
  <view class="content">
    <view v-for="(item, index) in dataList" :key="item.id">
      <!-- 显示列表项 -->
    </view>
    <!-- 当数据不足一屏或者正在加载时显示加载提示 -->
    <view v-if="!reachedMax && !loading" class="load-more">上拉加载更多</view>
    <view v-if="loading" class="loading">加载中...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 初始空数组存放列表数据
      loading: false, // 是否正在加载状态
      reachedMax: false, // 是否已加载到最大（无更多数据）
      page: 1, // 当前请求的页码
      pageSize: 20, // 每次请求的数据量
    };
  },
  onReachBottom() {
    if (!this.reachedMax && !this.loading) {
      this.loading = true; // 开始加载，设置加载状态为true

      // 发起网络请求
      uni.request({
        url: '你的API接口地址', // 替换为实际接口地址
        method: 'GET',
        data: {
          page: this.page + 1,
          pageSize: this.pageSize,
        },
        success: (res) => {
          const { data } = res;
          if (data.length > 0) {
            // 数据合并，假设返回的数据结构包含list属性
            this.dataList.push(...data.list);
            this.page++;
          } else {
            // 没有更多数据
            this.reachedMax = true;
          }
          this.loading = false; // 加载完成，重置加载状态为false
        },
        fail: () => {
          this.loading = false;
          uni.showToast({ title: '加载失败，请稍后重试', icon: 'none' });
        },
      });
    }
  },
};
</script>

这段代码首先定义了一个列表组件，在 onReachBottom 生命周期钩子中监听页面滚动到底部事件。当事件触发且未达到最大加载数量且当前未处于加载状态时，发起新的数据请求。请求成功后，将新获取的数据添加到现有的数据列表中，并更新页码和加载状态。如果服务器返回的数据为空，则认为已经没有更多数据可加载了。