一、下拉刷新

在移动端应用中，“下拉刷新”是非常常见的交互方式：用户手指向下拉动列表（或页面）时会触发刷新事件，然后去更新数据或刷新视图。

1.1 常见实现方式

在 uni-app 中，开启下拉刷新可以通过全局或页面级进行配置：

1. 全局配置：在 pages.json 中统一开启所有页面的下拉刷新。
2. 页面级配置：在页面的 style 配置里（依然写在 pages.json 中，或者通过页面的 onPullDownRefresh 事件）进行单独控制，只对需要的页面生效。

不推荐使用全局配置的原因是：如果每个页面都开启下拉刷新，就会增加不必要的性能消耗。按需开启才是最佳实践。

1.2 页面级配置

可以在 pages.json 中单独指定某个页面开启下拉刷新（通过 enablePullDownRefresh: true），示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "enablePullDownRefresh": true
      }
    }
  ]
}

这样只对 pages/index/index 页面启用下拉刷新功能，其他页面则保持默认。

1.3 监听下拉刷新事件

在页面的脚本部分（如 pages/index/index.vue），uni-app 提供了一个生命周期方法 onPullDownRefresh。当用户下拉页面时会自动触发这个方法，你可以在这里执行相应的刷新逻辑，如请求数据、重置列表等。

具体写法示例（以 Vue 方式为例）：

<script>
export default {
  onPullDownRefresh() {
    // 例如，请求最新数据
    setTimeout(() => {
      // 请求完成后，停止下拉刷新
      uni.stopPullDownRefresh();
    }, 2000);
  }
};
</script>

1. onPullDownRefresh：触发时机是在用户手指下拉动作达到一定阈值后。
2. uni.stopPullDownRefresh()：停止当前的下拉刷新动画，一定要在数据加载完成后调用，否则界面的“刷新中”提示不会消失。

1.4 停止下拉刷新

当你的刷新操作（如网络请求）结束后，需要调用 uni.stopPullDownRefresh() 来关闭刷新动画。否则用户界面会一直处于刷新状态。下图展示了此函数的调用方法：

一旦刷新完成之后，我们就可以通过uni.stopPullDownRefresh();关闭

二、上拉加载

在列表数据较多时，为了让用户能够分批浏览并减少首屏加载量，常常会在页面滚动到底部时触发“加载更多”事件，将后续数据懒加载进来，这个过程就是“上拉加载”。

2.1 监听页面触底事件

uni-app 提供了 onReachBottom 生命周期方法，当页面（或列表）滚动到底部时，就会触发这个方法。在实际项目中，你可以在该方法里执行 “请求下一页数据” 或 “更新列表” 等操作。

2.2 触底距离

在很多情况下，你不希望完全滚动到底部时才触发加载，而是提前在页面接近底部时就发起请求。uni-app 为我们提供了一个配置项：onReachBottomDistance（又称“触底距离”），默认值大约是50px（不同小程序平台默认值可能略有差异）。

可以在 pages.json 或页面配置中修改此属性，让它在距离底部一定距离时就触发 onReachBottom 回调：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "enablePullDownRefresh": false,
        "onReachBottomDistance": 100
      }
    }
  ]
}

2.3 加载更多示例

在 onReachBottom 方法中，我们可以发起网络请求或进行数据拼接。例如：

<script>
export default {
  data() {
    return {
      pageNum: 1,
      itemList: []
    };
  },
  onLoad() {
    // 首次加载或其他初始化逻辑
    this.loadData();
  },
  onReachBottom() {
    // 到底部时，加载下一页数据
    this.pageNum++;
    this.loadData();
  },
  methods: {
    loadData() {
      // 此处可替换为实际的请求接口
      const moreData = [
        /* 模拟数据，这里可请求后台API */
      ];
      // 将新数据拼接到已有列表中
      this.itemList = [...this.itemList, ...moreData];
    }
  }
};
</script>