uniapp触底事件

### UniApp 中触底事件实现方法

在 UniApp 开发中，`onReachBottom` 是用于监听页面滚动到底部时触发的方法。此功能允许开发者执行特定操作，如加载更多数据或显示提示信息。

#### 设置 `onReachBottomDistance`

可以在 `pages.json` 文件中配置具体的页面底部触发距离 `onReachBottomDistance`。例如设置为 50，则当用户滚动页面至距底部 50px 处时会触发 `onReachBottom` 事件[^1]：

{
  "path": "pages/index/index",
  "style": {
    "onReachBottomDistance": 50
  }
}

#### 使用 `onReachBottom` 方法

下面是一个完整的 Vue 组件示例，展示了如何利用 `onReachBottom` 来处理触底加载逻辑:

// index.vue
export default {
  data() {
    return {
      list: [], // 存储列表项的数据数组
      loading: false, // 加载状态标志位
      hasMoreData: true // 是否还有更多数据可加载
    };
  },
  
  methods: {
    loadMore() {
      this.loading = true;
      
      setTimeout(() => {
        const newData = Array.from({ length: 10 }).map((_, i) =>
          `Item ${(this.list.length || 0) + i}`
        );
        
        if (newData.length === 0) {
          this.hasMoreData = false; // 如果没有新数据则停止继续尝试加载
        }

        this.list.push(...newData);
        this.loading = false;

        console.log('Loaded more items');
      }, 1000); // 模拟网络请求延迟
    }
  },

  onReachBottom() {
    if (!this.loading && this.hasMoreData) {
      this.loadMore();
    }
  }
};

在此代码片段中，每当页面接近设定的距离并触发 `onReachBottom` 函数调用时，都会检查当前是否有正在进行中的加载任务 (`loading`) 和是否存在未加载完毕的数据 (`hasMoreData`)。如果条件满足，则发起新的异步加载请求模拟获取下一批次的数据，并将其追加到现有列表之后。