uniapp 如何实现列表虚拟加载

UniApp 实现列表虚拟加载主要是为了优化性能，当列表内容较多时，仅渲染可视区域内的数据，隐藏掉不可见的数据，当用户滚动到下面的内容时，再动态加载新的数据。以下是基本步骤：

1. 安装依赖：首先，在项目中安装 UniApp 的 `u-list` 组件以及相应的 `u-loadmore` 组件，可以使用 `uni-app run npm install u-list u-loadmore` 进行安装。

2. 创建列表结构：在需要虚拟加载的列表组件中，使用 `<u-list>` 标签，并设置 `scroll-y` 属性使其支持滚动。

<u-list scroll-y="true" ref="listRef">
  <template v-for="item in items" :key="item.id">
    <!-- 每个列表项 -->
  </template>
</u-list>

3. 使用 `u-loadmore` 组件：将 `u-loadmore` 放在列表底部，它会监听列表滚动事件并在适当的时候加载更多数据。

<u-loadmore @loadmore="loadMoreData" />

4. 编写数据管理和加载逻辑：在 Vue 组件的 `data` 或者 `methods` 中，创建一个数组来存储可见的数据，初始化时只填充部分数据。当触发 `loadMoreData` 函数时，从服务器获取新的数据并添加到数组中。

export default {
  data() {
    return {
      visibleItems: [], // 只加载可视范围内的数据
      isLoadMoreAvailable: true, // 初始状态下还有更多数据可以加载
      moreDataLoading: false, // 加载状态标志
    };
  },
  methods: {
    loadMoreData() {
      if (!this.moreDataLoading && this.isLoadMoreAvailable) {
        this.moreDataLoading = true; // 开始加载
        // 模拟异步请求
        setTimeout(() => {
          const newData = ...; // 从服务器获取的新数据
          this.visibleItems.push(...newData);
          this.isLoadMoreAvailable = false; // 表示已加载完
          this.moreDataLoading = false; // 结束加载
        }, 1000); // 虚拟加载间隔时间（这里模拟延迟）
      }
    },
  },
};