从原理到实践：如何在Taro中构建高效且易用的虚拟列表

// 处理列表数据，按规则分割
let initList: any[] = []; // 初始列表(备用)
const dealList = (list: any[]) => {
  const segmentNum = props?.segmentNum; // 每页显示数量
  let arr: any[] = [];
  const _list: any[] = [];
  list.forEach((item, index) => {
    arr.push(item);
    if ((index + 1) % segmentNum === 0) {
      _list.push(arr);
      arr = [];
    }
  });
  // 处理余数
  const restList = list.slice(_list.length * segmentNum);
  if (restList.length) {
    _list.push(restList);
  }
  initList = _list;
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

// 计算每一页数据渲染完成后所占的高度
const setheight = (list: any[], pageIndex?: number) => {
  const index = pageIndex ?? renderPageIndex.value;
  const query = Taro.createSelectorQuery();

  query.select(`.inner_list_${index}`).boundingClientRect();
  query.exec((res) => {
    if (list?.length) {
      pageHeightArr.value.push(res?.[0]?.height);  // 存储每一屏真实渲染高度
    }
  });
  observePageHeight(pageIndex); // 监听页面高度
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

const observePageHeight = (pageIndex?: number) => {
  const index = pageIndex ?? renderPageIndex.value;
  observer = Taro.createIntersectionObserver(
    currentPage.page as any,
  ).relativeToViewport({
    top: props?.screenNum * pageHeight,
    bottom: props?.screenNum * pageHeight,
  });
  console.log('observer', observer);
  // console.log("index", `.inner_list_${index}`);
  observer?.observe(`.inner_list_${index}`, (res) => {
    console.log(`.inner_list_${index}`, res.intersectionRatio);
    if (res.intersectionRatio <= 0) {
      // 当没有交集时，说明当前页面已经不在视口内，则将该屏数据修改为该屏高度进行占位
      towList.value[index] = {
        height: pageHeightArr.value[index],
      };
    } else {
      // 当有交集时，说明当前页面在视口内
      if (!towList.value[index]?.length) {
        towList.value[index] = initList[index];
      }
    }
  });
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

<scroll-view
      v-if="list?.length"
      class="list"
      :scrollY="true"
      :showScrollbar="false"
      :lowerThreshold="lowerThreshold"
      :scrollTop="scrollTop"
      @scrollToLower="renderNext"
      :enhanced="true"
      :bounces="false"
      :enablePassive="true"
      :style="{ height: height }"
    >
      <view
        :class="[`inner_list_${pageIndex}`]"
        :id="`inner_list_${pageIndex}`"
        v-for="(page, pageIndex) in towList"
        :key="pageIndex"
      >
        <template v-if="page?.length > 0">
          <view
            :id="`item_${pageIndex}_${index}`"
            v-for="(item, index) in page"
            :key="index"
          >
            <slot v-if="item" name="listItem" :item="item"></slot>
          </view>
        </template>
        <view v-else :style="{ height: `${pageHeightArr[pageIndex]}px` }">
        </view>
      </view>
      <!-- 底部自定义内容 -->
      <slot name="renderBottom"></slot>
    </scroll-view>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

// 渲染下一页
const renderNext = () => {
  // if (!towList.value[pageIndex]?.length) {
  //   // 无数据
  // }
    renderPageIndex.value += 1; // 更新当前页索引
    if (renderPageIndex.value >= initList.length) {
      // 已经到底
      return;
    }
    towList.value[renderPageIndex.value] = initList[renderPageIndex.value];

    Taro.nextTick(() => {
      setheight(props?.list);
    });
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

// 渲染数据
const list = ref(
  new Array(10000).fill(0).map((_, i) => {
    return {
      label: `第 ${i} 章`,
      value: i,
      isLock: false,
      time: "2023-01-12 16:07",
      type: "chapter",
    };
  }),
); // 列表数据
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

const formateList = (list: any[]): void => {
  const scrollToIndex = props?.scrollToIndex; // 滚动到指定位置
  const itemHeight =
    itemRenderHeight.value || (props?.itemHeight ?? 0) * (pageWidth / 375); // 每一项的真实渲染高度
  const segmentNum = props?.segmentNum; // 每页显示数量
  dealList(list);
  if (itemHeight && scrollToIndex !== undefined) {
    // 定高，可滚动至指定位置
    // console.log("scrollToIndex", scrollToIndex);
    const startIndex = Math.floor(scrollToIndex / segmentNum); // 找到当前索引所在的页面
    console.log("startIndex", startIndex);
    renderPageIndex.value = startIndex; // 更新当前页索引
    const pageHeight = segmentNum * itemHeight; // 一屏的高度
    console.log("pageHeight", pageHeight, itemHeight);
    // readyList
    for (let i = 0; i < startIndex; i++) {
      pageHeightArr.value[i] = pageHeight;
      towList.value[i] = {
        height: pageHeight,
      };
    }
    towList.value[startIndex] = initList[startIndex];
    if (startIndex + 1 < initList.length) {
      towList.value[startIndex + 1] = initList[startIndex + 1];
    }
    Taro.nextTick(() => {
      for (let i = 0; i < startIndex; i++) {
        // observePageHeight(i);
        setheight(list, i);
      }
      scrollTop.value = scrollToIndex * itemHeight;
      console.log("scrollTop---", scrollTop.value);
    });
  } else {
    // console.log("当前为不定高虚拟列表");
    towList.value = initList.slice(0, 1);
    Taro.nextTick(() => {
      setheight(list);
    });
  }
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.