在微信小程序中实现virtual-list的方法详解

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

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    );  }复制代码

 getSizeAndPositionForIndex(index: number) {    if (index &gt; this.lastMeasuredIndex) {      const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();      let offset =        lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size;      for (let i = this.lastMeasuredIndex + 1; i <h3 data-id="heading-3">2.根据偏移量搜索索引值</h3><p>在滚动过程中，需要通过滚动偏移量offset计算出展示在「可视区域」首项数据的索引值，一般情况下可以从0开始计算每一列表项的itemSize，累加到一旦超过offset，就可以得到这个索引值。但是在数据量太大和频繁触发的滚动事件中，会有较大的性能损耗。好在列表项的滚动距离是完全升序排列的，所以可以对已经缓存的数据做二分查找，把时间复杂度降低到 O(lgN) 。</p><p>js代码如下：</p><pre class="brush:php;toolbar:false;">  findNearestItem(offset: number) {    offset = Math.max(0, offset);    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();    const lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);    if (lastMeasuredSizeAndPosition.offset &gt;= 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  offset) {        high = middle - 1;      }    }    if (low &gt; 0) {      return low - 1;    }    return 0;  }复制代码

private exponentialSearch({    index,    offset,  }: {    index: number;    offset: number;  }) {    let interval = 1;    while (      index <h3 data-id="heading-4">3.计算startIndex、endIndex</h3><p>我们知道了「可视区域」尺寸containerSize，滚动偏移量offset，在加上预渲染的条数overscanCount进行调整，就可以计算出「可视区域」起始项的索引值startIndex和结束项索引值endIndex，实现步骤如下：</p><p>1.找到距离offset最近的索引值，这个值就是起始项的索引值startIndex；</p><p>2.通过startIndex获取此项的offset和size，再对offset进行调整；</p><p>3.offset加上containerSize得到结束项的maxOffset，从startIndex开始累加，直到越过maxOffset，得到结束项索引值endIndex。</p><p>js代码如下：</p><pre class="brush:php;toolbar:false;"> 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 <h3 data-id="heading-5">3.监听scroll事件，实现虚拟列表滚动</h3><p>现在可以通过监听scroll事件，动态更新startIndex、endIndex、totalSize、offset，就可以实现虚拟列表滚动。</p><p>js代码如下：</p><pre class="brush:php;toolbar:false;">  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) &amp;&amp; isNumber(stop)) {          let index = start - 1;          while (++index <p>在调用的时候，通过render事件回调出来的startIndex, stopIndex，styleItems，截取长列表「可视区域」的数据，在把列表项目的itemSize和offset通过绝对定位的方式应用在列表上</p><p>代码如下：</p><pre class="brush:php;toolbar:false;">let list = Array.from({ length: 10000 }).map((_, index) =&gt; index);Page({  data: {    itemSize: index =&gt; 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(() =&gt; {      const appendList = Array.from({ length: 10 }).map(        (_, index) =&gt; list.length + index,      );      list = list.concat(appendList);      this.setData({        itemCount: list.length,        list: this.data.list.concat(appendList),      });    }, 500);  },});复制代码

<view>  <virtual-list>    <view>      <view>{{ item + 1 }}</view>    </view>  </virtual-list>  {{itemCount}}</view>复制代码