uni-app 实现下拉刷新 + 上拉加载，复制就能用！

做列表页必备的下拉刷新 + 上拉加载，其实超简单！不用装插件，原生 API 两步搞定，兼容所有端！

📝 步骤 1：页面配置开启功能

在对应页面的 pages.json 里加配置，允许下拉刷新和上拉加载

{
  "path": "pages/list/list",
  "style": {
    "enablePullDownRefresh": true, // 开启下拉刷新
    "onReachBottomDistance": 50 // 距离底部50px触发上拉
  }
}

📝 步骤 2：写逻辑代码

在页面的 script 里写两个生命周期函数，处理刷新和加载逻辑

export default {
  data() {
    return {
      list: [], // 列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页条数
      hasMore: true // 是否还有更多数据
    };
  },
  onLoad() {
    // 页面加载时获取第一页数据
    this.getListData();
  },
  // 下拉刷新触发
  onPullDownRefresh() {
    // 重置页码和状态
    this.page = 1;
    this.hasMore = true;
    // 重新请求数据
    this.getListData(() => {
      // 停止下拉刷新动画
      uni.stopPullDownRefresh();
    });
  },
  // 上拉加载触发
  onReachBottom() {
    // 没有更多数据就直接返回
    if (!this.hasMore) return;
    // 页码+1
    this.page++;
    this.getListData();
  },
  methods: {
    // 获取列表数据
    getListData(callback) {
      // 模拟请求接口，实际换成你的接口地址
      uni.request({
        url: "https://xxx.com/api/list",
        data: {
          page: this.page,
          pageSize: this.pageSize
        },
        success: (res) => {
          const data = res.data.data;
          if (this.page === 1) {
            // 第一页直接覆盖数据
            this.list = data;
          } else {
            // 非第一页追加数据
            this.list = [...this.list, ...data];
          }
          // 没有更多数据了
          if (data.length < this.pageSize) {
            this.hasMore = false;
          }
          // 执行回调（停止下拉刷新）
          callback && callback();
        }
      });
    }
  }
};

✨ 优化体验：加加载提示

// 请求数据时显示加载中
uni.showLoading({ title: "加载中..." });
// 请求成功后隐藏
uni.hideLoading();

// 没有更多数据时提示
if (!this.hasMore) {
  uni.showToast({
    title: "没有更多数据了",
    icon: "none"
  });
}

💡 核心要点：

1. 下拉刷新要重置页码，重新请求第一页！
2. 上拉加载要判断是否还有更多数据，避免重复请求！
3. 记得停止下拉刷新动画，不然会一直转！