uniapp中onReachBottomDistance实现上拉加载更多

在uniapp中实现上拉加载更多可以使用onReachBottomDistance属性。这个属性是在页面中设置的，表示当距离页面底部多少距离时触发上拉加载更多的事件。

具体实现步骤如下：

1. 在页面的配置项中添加onReachBottomDistance属性，设置触发距离，例如：onReachBottomDistance="50"，表示当距离页面底部50像素时触发上拉加载更多事件。

2. 在页面的methods中定义上拉加载更多的事件处理函数，例如：

onLoadMore() {
  // 加载更多数据
}

3. 在页面中监听onReachBottom事件，当触发时调用上拉加载更多的事件处理函数，例如：

onReachBottom() {
  this.onLoadMore();
}

完整的示例代码如下：

<template>
  <view>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10
    };
  },
  methods: {
    onLoadMore() {
      // 模拟异步请求数据
      setTimeout(() => {
        for (let i = 0; i < this.pageSize; i++) {
          this.list.push(`Item ${this.list.length + 1}`);
        }
        this.page++;
      }, 1000);
    }
  },
  onReachBottom() {
    this.onLoadMore();
  },
  onReady() {
    this.onLoadMore();
  }
};
</script>

<style>
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
</style>

在这个示例中，通过模拟异步请求数据来实现上拉加载更多，每次请求返回10条数据。在页面加载完成时，会触发onReady事件，调用onLoadMore方法加载第一页数据。当用户滑动到距离页面底部50像素时，会触发onReachBottom事件，调用onLoadMore方法加载下一页数据。