uniapp页面中实现上拉加载更多

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

1. 在页面的`<template>`标签中，添加一个`<scroll-view>`标签，并设置其`scroll-y`属性为`true`，表示可垂直滚动。

2. 在`<scroll-view>`标签中，添加一个`<view>`标签，并设置其`v-for`属性为一个数组，用于渲染列表数据。

3. 在`<scroll-view>`标签中，添加一个`<view>`标签，用于显示“加载更多”的提示信息。

4. 在页面中，定义一个变量`page`，表示当前页码；定义一个方法`loadMore`，用于加载更多数据。

5. 在页面的`<script>`标签中，使用`onReachBottom`事件监听到页面滚动到底部时，调用`loadMore`方法加载更多数据。

示例代码如下：

<template>
  <scroll-view scroll-y @scrolltolower="loadMore">
    <view v-for="(item, index) in list" :key="index">{{ item }}</view>
    <view v-show="loading">加载中...</view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 列表数据
      page: 1, // 当前页码
      loading: false // 是否正在加载数据
    };
  },
  methods: {
    loadMore() {
      if (this.loading) return; // 如果正在加载数据，则不再请求
      this.loading = true; // 设置正在加载数据的状态为true
      uni.request({
        url: 'http://api.com/data',
        data: {
          page: this.page + 1 // 请求下一页数据
        },
        success: res => {
          this.list = this.list.concat(res.data.list); // 将新数据拼接到列表中
          this.page += 1; // 将页码加1
          this.loading = false; // 设置正在加载数据的状态为false
        }
      });
    }
  }
};
</script>