WeChat 애플릿에서 가상 목록을 구현하는 방법에 대한 자세한 설명

【관련 학습 권장 사항: WeChat 미니 프로그램 튜토리얼】

Background

미니 프로그램은 페이지가 너무 많은 wxml 노드를 렌더링할 때 다양한 시나리오에서 긴 상호 작용 목록을 접하게 됩니다. 미니 프로그램 페이지의 지연 및 흰색 화면. 주된 이유는 다음과 같습니다.

1. 목록 데이터의 양이 많고, setData를 초기화하고 렌더링 목록 wxml을 초기화하는 데 시간이 오래 걸립니다.

2. 렌더링되는 wxml 노드가 많아 새로 필요합니다. setData가 뷰를 업데이트할 때마다 생성됩니다. 가상 트리와 이전 트리의 diff 작업은 상대적으로 시간이 많이 걸립니다.

3. 렌더링되는 wxml 노드가 많고 페이지에서 수용할 수 있는 wxml이 제한되어 있습니다. 메모리 점유량이 높습니다.

WeChat 애플릿 자체의 스크롤 보기는 긴 목록에 최적화되어 있지 않습니다. 공식 구성 요소 recycle-view는 가상 목록과 유사한 긴 목록 구성 요소입니다. 이제 가상 목록의 원리를 분석하고 작은 프로그램의 가상 목록을 처음부터 구현해 보겠습니다.

구현 원리

우선 가상 목록이 무엇인지 이해해야 합니다. 이는 "가시 영역"과 그 주변 DOM 요소만 로드하고 DOM 요소를 재사용하여 "가시 영역"만 렌더링하는 초기화입니다. 스크롤 프로세스 중에” 및 인근 DOM 요소의 스크롤 목록 프런트엔드 최적화 기술. 기존 목록 방법과 비교하여 매우 높은 초기 렌더링 성능을 달성할 수 있으며 스크롤 프로세스 중에 초경량 DOM 구조만 유지합니다.

가상 목록의 가장 중요한 개념:

• 스크롤 가능 영역: 예를 들어 목록 컨테이너의 높이는 600이고 내부 요소의 높이의 합이 컨테이너의 높이를 초과합니다. scrolled, "스크롤 가능 영역" ";

• Visible 영역: 예를 들어 목록 컨테이너의 높이가 600이고 오른쪽에 스크롤할 수 있는 세로 스크롤 막대가 있습니다. 시각적으로 보이는 내부 영역은 "시각적 영역".

가상 목록 구현의 핵심은 스크롤 이벤트를 수신하고 스크롤 거리 오프셋을 통해 "시각적 영역" 데이터 렌더링의 상단 거리와 전후 차단 지수 값을 동적으로 조정하는 것입니다. 스크롤된 요소의 크기 합계, totalSize 구현 단계는 다음과 같습니다.

1. 스크롤 이벤트의 scrollTop/scrollLeft를 수신하고 "표시 영역"의 시작 항목의 인덱스 값 startIndex를 계산합니다.

2. startIndex 및 endIndex를 통해 긴 목록의 데이터를 가로채서 목록으로 업데이트합니다.

3. 항목의 오프셋을 스크롤 가능한 영역과 항목에 적용합니다.

1. 목록 항목 너비/높이 및 스크롤 오프셋

가상 목록에서 "스크롤 가능 영역"은 각 목록 항목의 너비/높이를 기준으로 계산되며 사용자 지정이 필요할 수 있습니다. 목록 항목의 너비/높이를 계산하려면 itemSizeGetter 함수를 정의하세요.

itemSizeGetter(itemSize) {      return (index: number) => {        if (isFunction(itemSize)) {          return itemSize(index);
        }        return isArray(itemSize) ? itemSize[index] : itemSize;
      };
    }复制代码

스크롤 과정에서 나타나지 않은 목록 항목의 itemSize는 계산되지 않습니다. 이때 예상 목록 항목의 estimateItemSize를 사용하여 높이를 계산하는 것이 목적입니다. 대신 "스크롤 가능 영역"입니다.

getSizeAndPositionOfLastMeasuredItem() {    return this.lastMeasuredIndex >= 0
      ? this.itemSizeAndPositionData[this.lastMeasuredIndex]
      : { offset: 0, size: 0 };
  }

getTotalSize(): number {    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();    return (
      lastMeasuredSizeAndPosition.offset +
      lastMeasuredSizeAndPosition.size +
      (this.itemCount - this.lastMeasuredIndex - 1) * this.estimatedItemSize
    );
  }复制代码

여기서 가장 최근에 계산된 목록 항목의 itemSize와 오프셋이 캐시를 통해 직접 적중되는 것을 볼 수 있습니다. 이는 각 목록 항목의 두 매개변수를 얻을 때 캐시되기 때문입니다.

 getSizeAndPositionForIndex(index: number) {    if (index > this.lastMeasuredIndex) {      const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();      let offset =
        lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size;      for (let i = this.lastMeasuredIndex + 1; i <= index; i++) {        const size = this.itemSizeGetter(i);        this.itemSizeAndPositionData[i] = {
          offset,
          size,
        };

        offset += size;
      }      this.lastMeasuredIndex = index;
    }    return this.itemSizeAndPositionData[index];
 }复制代码

2. 오프셋을 기준으로 인덱스 값을 검색합니다

스크롤 과정에서 스크롤 오프셋 오프셋을 통해 "가시 영역"에 표시되는 첫 번째 데이터의 인덱스 값을 계산해야 합니다. 0. 각 목록 항목의 itemSize를 오프셋을 초과할 때까지 누적하여 인덱스 값을 얻을 수 있습니다. 그러나 데이터의 양이 너무 많고 스크롤 이벤트가 자주 발생하면 성능 손실이 커집니다. 다행스럽게도 목록 항목의 스크롤 거리가 완전히 오름차순으로 정렬되어 있으므로 캐시된 데이터에 대해 이진 검색을 수행할 수 있으므로 시간 복잡도가 O(lgN)으로 줄어듭니다.

js 코드는 다음과 같습니다.

  findNearestItem(offset: number) {
    offset = Math.max(0, offset);    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();    const lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);    if (lastMeasuredSizeAndPosition.offset >= offset) {      return this.binarySearch({        high: lastMeasuredIndex,        low: 0,
        offset,
      });
    } else {      return this.exponentialSearch({        index: lastMeasuredIndex,
        offset,
      });
    }
  }

 private binarySearch({
    low,
    high,
    offset,
  }: {    low: number;
    high: number;
    offset: number;
  }) {    let middle = 0;    let currentOffset = 0;    while (low <= high) {
      middle = low + Math.floor((high - low) / 2);
      currentOffset = this.getSizeAndPositionForIndex(middle).offset;      if (currentOffset === offset) {        return middle;
      } else if (currentOffset < offset) {
        low = middle + 1;
      } else if (currentOffset > offset) {
        high = middle - 1;
      }
    }    if (low > 0) {      return low - 1;
    }    return 0;
  }复制代码

캐시된 계산 결과가 없는 검색의 경우 먼저 지수 검색을 사용하여 검색 범위를 좁힌 다음 이진 검색을 사용합니다.

private exponentialSearch({
    index,
    offset,
  }: {    index: number;
    offset: number;
  }) {    let interval = 1;    while (
      index < this.itemCount &&      this.getSizeAndPositionForIndex(index).offset < offset
    ) {
      index += interval;
      interval *= 2;
    }    return this.binarySearch({      high: Math.min(index, this.itemCount - 1),      low: Math.floor(index / 2),
      offset,
    });
  }
}复制代码

3. startIndex 및 endIndex를 계산합니다

"가시 영역" 컨테이너 크기와 롤링 오프셋 오프셋을 알고 있습니다. 사전 렌더링된 막대 수 overscanCount를 조정한 후 "가시 영역"의 시작을 계산할 수 있습니다. 시작 항목의 인덱스 값 startIndex와 종료 항목의 인덱스 값 endIndex, 구현 단계는 다음과 같습니다.

1. 오프셋에 가장 가까운 인덱스 값을 찾습니다. 이 값은 시작 항목의 인덱스 값 startIndex입니다.

2.startIndex 오프셋과 크기를 통해 이 항목의 인덱스 값을 가져온 다음 오프셋을 조정합니다.

3.offset과 ContainerSize는 최종 항목의 maxOffset을 가져오고, maxOffset을 초과할 때까지 startIndex부터 누적을 시작하여 끝을 가져옵니다. 아이템 인덱스 값 endIndex.

js 코드는 다음과 같습니다.

 getVisibleRange({
    containerSize,
    offset,
    overscanCount,
  }: {    containerSize: number;
    offset: number;
    overscanCount: number;
  }): { start?: number; stop?: number } {    const maxOffset = offset + containerSize;    let start = this.findNearestItem(offset);    const datum = this.getSizeAndPositionForIndex(start);
    offset = datum.offset + datum.size;    let stop = start;    while (offset < maxOffset && stop < this.itemCount - 1) {
      stop++;
      offset += this.getSizeAndPositionForIndex(stop).size;
    }    if (overscanCount) {
      start = Math.max(0, start - overscanCount);
      stop = Math.min(stop + overscanCount, this.itemCount - 1);
    }    return {
      start,
      stop,
    };
}复制代码

3. 스크롤 이벤트를 수신하여 가상 목록 스크롤을 실현합니다.

이제 스크롤 이벤트를 수신하고 startIndex, endIndex, totalSize 및 offset을 동적으로 업데이트하여 가상 목록 스크롤을 실현할 수 있습니다. .

js 코드는 다음과 같습니다:

  getItemStyle(index) {      const style = this.styleCache[index];      if (style) {        return style;
      }      const { scrollDirection } = this.data;      const {
        size,
        offset,
      } = this.sizeAndPositionManager.getSizeAndPositionForIndex(index);      const cumputedStyle = styleToCssString({        position: 'absolute',        top: 0,        left: 0,        width: '100%',
        [positionProp[scrollDirection]]: offset,
        [sizeProp[scrollDirection]]: size,
      });      this.styleCache[index] = cumputedStyle;      return cumputedStyle;
  },
  
  observeScroll(offset: number) {      const { scrollDirection, overscanCount, visibleRange } = this.data;      const { start, stop } = this.sizeAndPositionManager.getVisibleRange({        containerSize: this.data[sizeProp[scrollDirection]] || 0,
        offset,
        overscanCount,
      });      const totalSize = this.sizeAndPositionManager.getTotalSize();      if (totalSize !== this.data.totalSize) {        this.setData({ totalSize });
      }      if (visibleRange.start !== start || visibleRange.stop !== stop) {        const styleItems: string[] = [];        if (isNumber(start) && isNumber(stop)) {          let index = start - 1;          while (++index <= stop) {
            styleItems.push(this.getItemStyle(index));
          }
        }        this.triggerEvent(&#39;render&#39;, {          startIndex: start,          stopIndex: stop,
          styleItems,
        });
      }      this.data.offset = offset;      this.data.visibleRange.start = start;      this.data.visibleRange.stop = stop;
  },复制代码

在调用的时候，通过render事件回调出来的startIndex, stopIndex，styleItems，截取长列表「可视区域」的数据，在把列表项目的itemSize和offset通过绝对定位的方式应用在列表上

代码如下：

let list = Array.from({ length: 10000 }).map((_, index) => index);

Page({  data: {    itemSize: index => 50 * ((index % 3) + 1),    styleItems: null,    itemCount: list.length,    list: [],
  },
  onReady() {    this.virtualListRef =      this.virtualListRef || this.selectComponent('#virtual-list');
  },

  slice(e) {    const { startIndex, stopIndex, styleItems } = e.detail;    this.setData({      list: list.slice(startIndex, stopIndex + 1),
      styleItems,
    });
  },

  loadMore() {
    setTimeout(() => {      const appendList = Array.from({ length: 10 }).map(        (_, index) => list.length + index,
      );
      list = list.concat(appendList);      this.setData({        itemCount: list.length,        list: this.data.list.concat(appendList),
      });
    }, 500);
  },
});复制代码

<view class="container">
  <virtual-list scrollToIndex="{{ 16 }}" lowerThreshold="{{50}}" height="{{ 600 }}" overscanCount="{{10}}" item-count="{{ itemCount }}" itemSize="{{ itemSize }}" estimatedItemSize="{{100}}" bind:render="slice" bind:scrolltolower="loadMore">
    <view wx:if="{{styleItems}}">
      <view wx:for="{{ list }}" wx:key="index" style="{{ styleItems[index] }};line-height:50px;border-bottom:1rpx solid #ccc;padding-left:30rpx">{{ item + 1 }}</view>
    </view>
  </virtual-list>
  {{itemCount}}</view>复制代码

参考资料

在写这个微信小程序的virtual-list组件过程中，主要参考了一些优秀的开源虚拟列表实现方案：

• react-tiny-virtual-list
• react-virtualized
• react-window

总结

通过上述解释已经初步实现了在微信小程序环境中实现了虚拟列表，并且对虚拟列表的原理有了更加深入的了解。但是对于瀑布流布局，列表项尺寸不可预测等场景依然无法适用。在快速滚动过程中，依然会出现来不及渲染而白屏，这个问题可以通过增加「可视区域」外预渲染的item条数overscanCount来得到一定的缓解。

想了解更多编程学习，敬请关注php培训栏目！

위 내용은 WeChat 애플릿에서 가상 목록을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!