uniapp 上拉加载更多

UniApp 中可以使用 `onReachBottom` 事件来实现上拉加载更多的功能。

具体实现步骤如下：

1. 在需要实现上拉加载的页面或组件上添加 `onReachBottom` 事件绑定：

<template>
  <view>
    <!-- 数据列表 -->
    <ul>
      <li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 数据列表
    };
  },

  methods: {
    // 上拉加载更多
    onReachBottom() {
      // 加载更多数据
    },
  },
};
</script>

2. 在 `onReachBottom` 事件中加载更多数据，例如使用 `uni.request` 发送请求获取数据：

methods: {
  // 上拉加载更多
  onReachBottom() {
    uni.request({
      url: 'https://example.com/api/data',
      data: {
        // 请求参数
        page: this.pageNum + 1,
      },
      success: (res) => {
        const newDataList = res.data; // 新数据列表
        this.dataList = [...this.dataList, ...newDataList]; // 拼接数据
        this.pageNum++; // 更新页码
      },
    });
  },
},

注意事项：

1. 加载更多数据时，需要通过参数或状态记录当前页码，以便下一次加载时从正确的位置开始加载。

2. 加载更多数据时，需要将新数据和旧数据进行拼接。

3. 在加载数据的过程中，可以显示加载中的提示，例如使用 `uni.showLoading` 和 `uni.hideLoading` 方法。