vant-list上拉加载

Vant UI库中的`van-list`组件提供了一种常见的列表滚动加载机制，也称为“上拉加载”或“懒加载”。当你滚动到列表底部时，如果还有更多数据需要加载，它会自动触发一个网络请求，获取新的内容并动态添加到列表中，避免一开始就一次性加载所有数据，提高用户体验。

在使用`van-list`上拉加载功能时，通常需要注意以下步骤：

1. 设置`loadmore`属性：在`van-list`组件上设置`loadmore`属性为`true`，启用加载更多功能。

<van-list :loadmore="loadMore" @loadmore-end="loadMoreEnd">
  <!-- 数据项 -->
</van-list>

2. 定义状态：维护一个标志变量如`isLoading`或`hasMoreData`来表示是否正在加载更多的数据。

data() {
  return {
    isLoading: false,
   .hasMoreData: true,
    // 其他数据
  }
},

3. 实现加载更多逻辑：当用户滚动到底部时，更新`isLoading`为`true`，发起请求；成功加载新数据后，更新`isLoading`为`false`，`hasMoreData`为`false`，表明已无更多数据。

methods: {
  loadMoreEnd() {
    this.isLoading = false;
    // 发送网络请求，假设返回的是新的数据
    this.fetchMoreData().then(() => {
      if (this.data.length === this.total) {
        this.hasMoreData = false; // 如果数据总量等于已加载的，说明没有更多了
      } else {
        this.data.push(...newData); // 添加新数据到现有数据中
      }
    });
  },
  fetchMoreData() {
    return new Promise((resolve) => {
      // 模拟异步请求
      setTimeout(() => {
        resolve([{ ...newData }]);
      }, 1000);
    });
  },
}