uniapp 触底刷新

UniApp 是一款基于 Vue.js 的跨平台框架，它允许开发者编写一次代码，构建并运行在多个平台上，如微信小程序、H5、iOS 和 Android 等。触底刷新（Pull-to-Refresh）是一个常见的交互设计，用户通过快速下拉页面顶部，表示希望获取新的内容。

在 UniApp 中实现触底刷新通常涉及以下几个步骤：

1. 配置 Refresh 组件：在需要支持刷新功能的页面组件中引入 Uni-app 提供的 `uni-refresh` 或者自定义的 Refresh 组件。

<template>
  <view class="refresh-container">
    <uni-refresh v-model="showRefresh" @refresh="loadNewData">
      <text slot="indicator">加载更多...</text>
    </uni-refresh>
    <!-- 主体内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      showRefresh: false,
    };
  },
  methods: {
    loadNewData() {
      // 当触发刷新时，这里可以发送网络请求或模拟数据更新
      this.showRefresh = false; // 结束刷新状态
      this.newDataLoaded(); // 自定义的方法处理新数据加载后的操作
    },
    newDataLoaded() {
      // 加载完新数据后，根据实际情况填充到页面
      // 这里只是一个示例，实际应用中应替换为真实的数据更新逻辑
      console.log('新数据已加载');
    },
  },
};
</script>

2. 控制显示和隐藏：在数据模型中维护一个布尔值 `showRefresh`，当开始刷新时设置为 `true`，结束时设置为 `false`。`@refresh` 事件会在用户释放下拉动作时触发。