uniapp 触底加载

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，能够编译到iOS、Android、H5、以及各种小程序等多个平台。触底加载（通常称为“上拉加载更多”或“下拉刷新”）是一种常见的用户交互设计，用于在用户滚动到页面底部时加载更多内容。在 uni-app 中，可以利用框架提供的 API 或者自己编写逻辑来实现触底加载。

具体实现上，可以通过监听滚动事件，并在滚动到底部时执行数据加载的逻辑。在 uni-app 中，可以使用 `scroll-view` 组件或页面的滚动事件监听来完成这一功能。以下是一个简单的实现逻辑示例：

1. 在页面的 `onReachBottom` 事件中触发数据加载函数。
2. 数据加载完成后，更新页面数据并重新渲染。
3. 为了避免重复加载数据，可以设置一个标志位，表示是否正在加载数据。

代码示例：

export default {
  data() {
    return {
      listData: [], // 页面显示的数据列表
      isLoading: false // 是否正在加载数据的标志
    };
  },
  methods: {
    loadMoreData() {
      if (this.isLoading) return; // 如果正在加载，则不再加载
      this.isLoading = true; // 设置标志为true，表示正在加载
      // 这里执行实际的数据加载逻辑，比如调用API获取更多数据
      // 假设加载成功后执行回调函数
      this.fetchDataCallback(() => {
        this.isLoading = false; // 加载完成，将标志设置为false
      });
    },
    fetchDataCallback(callback) {
      // 模拟数据加载的异步操作
      setTimeout(() => {
        // 假设每次加载10条数据
        const newData = Array.from({ length: 10 }, (_, index) => index + this.listData.length);
        this.listData = this.listData.concat(newData);
        callback && callback();
      }, 2000);
    }
  },
  onReachBottom() {
    // 当页面滚动到底部时调用加载更多数据的方法
    this.loadMoreData();
  }
};

在页面的 `onReachBottom` 事件中调用 `loadMoreData` 方法，每次用户滚动到底部时都会触发这个方法来加载更多数据。如果正在加载数据，则不会重复触发。