uni-app 实现上拉加载分页

在 uni-app 中实现上拉加载分页（也称为下拉刷新和上拉加载更多）的功能，可以使用 uni-app 提供的 scroll-view 组件结合页面数据状态管理以及接口请求来完成。以下是一个基本的实现示例：

1. 首先，在页面的 template 部分添加一个 scroll-view 组件，并设置相关属性：

<template>
  <view class="content">
    <scroll-view :scroll-y="true" @scrolltolower="loadMore" scroll-top="{{scrollTop}}" style="height: 100vh; width: 100%; overflow:hidden;">
      <view v-for="(item, index) in list" :key="index">
        <!-- 显示列表内容 -->
        <text>{{ item.title }}</text>
      </view>
      <!-- 上拉加载提示 -->
      <view v-if="loadingMore && !noMoreData" class="loading-tip">正在加载...</view>
      <view v-if="noMoreData" class="loading-tip">没有更多数据了</view>
    </scroll-view>
  </view>
</template>

2. 在 script 部分定义数据、方法和生命周期钩子：

<script>
export default {
  data() {
    return {
      list: [], // 初始数据为空数组
      loadingMore: false, // 是否正在加载更多的标志，默认为false
      noMoreData: false, // 是否还有更多数据可加载，默认为false
      scrollTop: 0, // 用于记录滚动条位置，以便于用户手动滑动后还能保持原位置
    };
  },
  onLoad() {
    this.fetchData(1); // 页面加载时获取第一页数据
  },
  methods: {
    fetchData(page) {
      // 模拟异步获取数据
      this.loadingMore = true;
      setTimeout(() => {
        // 实际开发中应该调用后端API获取数据
        const newData = [/*...模拟从服务器获取的数据...*/];
        if (page === 1) {
          this.list = newData;
        } else {
          this.list = [...this.list, ...newData];
        }
        
        // 检查是否还有更多数据可加载
        if (/* 新获取的数据为空或者达到最后一页 */) {
          this.noMoreData = true;
        }

        this.loadingMore = false;
      }, 1000); // 延迟模拟网络延迟
    },
    
    loadMore() {
      // 当滚动到底部触发此事件
      if (!this.loadingMore && !this.noMoreData) {
        const nextPage = this.list.length / pageSize + 1; // 根据当前数据量计算下一页数
        this.fetchData(nextPage);
      }
    },
  },
};
</script>

3. 样式部分根据需求自定义 .loading-tip 的样式。

注意：实际项目中，请将模拟的网络请求替换为真实的后台API调用，并且根据实际情况处理分页参数、错误处理等问题。同时，确保滚动到顶部时能够正确复位 scrollTop 值，以支持上拉加载后用户还可以继续向上滚动浏览历史数据。