uni-app列表虚拟列表局部数据加载

在 uni-app 中实现虚拟列表的局部数据加载可以通过以下步骤来实现：

首先，在页面或组件的 data 中定义列表数据的总数和当前显示的数据。

data() {
  return {
    totalData: [], // 列表的完整数据，例如从后端获取的总数据
    currentData: [], // 当前显示的数据
    startIndex: 0, // 当前显示数据的起始索引
    endIndex: 100, // 当前显示数据的结束索引
    bufferSize: 20 // 滚动缓冲区大小，可以根据需要调整
  };
},

在页面或组件的 onReady 生命周期函数内，初始化虚拟列表的滚动容器和监听滚动事件。

onReady() {
  this.getListData(); // 获取完整数据列表
  // 初始化滚动容器
  this.listContainer = uni.createSelectorQuery().select('#list-container');
  // 监听滚动事件
  this.listContainer.scroll((event) => {
    this.handleScroll(event);
  }).exec();
},

实现 handleScroll 方法，用于监听页面滚动事件，在滚动过程中进行局部数据加载的操作。

handleScroll(event) {
  const { scrollTop, scrollHeight, clientHeight } = event[0];
  const visibleRange = this.bufferSize * clientHeight; // 可见区域的高度范围

  // 如果滚动到底部
  if (scrollHeight - scrollTop - clientHeight <= visibleRange) {
    this.loadMoreData();
  }
},

实现 loadMoreData 方法，用于加载更多的局部数据。

loadMoreData() {
  if (this.endIndex < this.totalData.length) {
    // 如果还有数据可加载
    this.startIndex += this.bufferSize; // 更新起始索引
    this.endIndex = Math.min(this.startIndex + this.bufferSize, this.totalData.length); // 更新结束索引
    this.currentData = this.currentData.concat(this.totalData.slice(this.startIndex, this.endIndex)); // 加载新数据
  }
},

在模板中渲染当前显示的数据。

<view id="list-container">
  <view v-for="(item, index) in currentData" :key="index">{{ item }}</view>
</view>

通过以上步骤，你可以实现虚拟列表的局部数据加载，当用户滚动到底部时，会触发加载更多数据的操作，从而实现数据的懒加载效果。

uni-app列表虚拟列表局部数据加载

悦读