uni-app 触底加载

Uni-app 是一个基于 Vue.js 的跨平台开发框架，可用于开发多个平台的应用程序，包括小程序、H5、App等。在 Uni-app 中实现触底加载的功能，可以通过监听滚动事件来判断是否滚动到页面底部，然后触发加载更多的操作。

下面是一个简单的示例代码：

1. 在页面的 `onLoad` 生命周期中初始化数据：

onLoad() {
  this.page = 1; // 初始化页码
  this.list = []; // 初始化数据列表
  this.loadMore(); // 加载第一页数据
},

2. 监听页面滚动事件，在滚动到页面底部时触发加载更多的操作：

onPageScroll(e) {
  // 页面可视高度
  const windowHeight = uni.getSystemInfoSync().windowHeight;
  // 页面总高度
  const pageHeight = uni.createSelectorQuery().select('.page-content').boundingClientRect().height;

  // 滚动条位置
  const scrollTop = e.scrollTop;

  // 判断是否滚动到底部
  if (scrollTop + windowHeight >= pageHeight) {
    this.loadMore();
  }
},

3. 加载更多数据的方法：

loadMore() {
  // 发送请求获取数据，并更新数据列表
  uni.request({
    url: 'http://example.com/api/data',
    data: {
      page: this.page,
      pageSize: 10, // 每页数据条数
    },
    success: (res) => {
      this.list = this.list.concat(res.data); // 更新数据列表
      this.page++; // 页码递增
    },
  });
},

这样，当页面滚动到底部时，会自动触发加载更多数据的操作。你可以根据实际需求进行适当的修改和扩展。