在微信小程序中实现virtuallist的方法详解

1.列表项的宽/高和滚动偏移量

在虚拟列表中，依赖每一个列表项的宽/高来计算「可滚动区域」，而且可能是需要自定义的，定义itemSizeGetter函数来计算列表项宽/高。

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

滚动过程中，不会计算没有出现过的列表项的itemSize，这个时候会使用一个预估的列表项estimatedItemSize，目的就是在计算「可滚动区域」高度的时候，没有测量过的itemSize用estimatedItemSize代替。

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和offset，这是因为在获取每一个列表项的两个参数时候，都对其做了缓存。

 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.根据偏移量搜索索引值

在滚动过程中，需要通过滚动偏移量offset计算出展示在「可视区域」首项数据的索引值，一般情况下可以从0开始计算每一列表项的itemSize，累加到一旦超过offset，就可以得到这个索引值。但是在数据量太大和频繁触发的滚动事件中，会有较大的性能损耗。好在列表项的滚动距离是完全升序排列的，所以可以对已经缓存的数据做二分查找，把时间复杂度降低到 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) {
        high = middle - 1;
      }
    }    if (low > 0) {      return low - 1;
    }    return 0;
  }

对于搜索没有缓存计算结果的查找，先使用指数查找缩小查找范围，再使用二分查找。

private exponentialSearch({
    index,
    offset,
  }: {    index: number;
    offset: number;
  }) {    let interval = 1;    while (
      index 
3.计算startIndex、endIndex
我们知道了「可视区域」尺寸containerSize，滚动偏移量offset，在加上预渲染的条数overscanCount进行调整，就可以计算出「可视区域」起始项的索引值startIndex和结束项索引值endIndex，实现步骤如下：
1.找到距离offset最近的索引值，这个值就是起始项的索引值startIndex；
2.通过startIndex获取此项的offset和size，再对offset进行调整；
3.offset加上containerSize得到结束项的maxOffset，从startIndex开始累加，直到越过maxOffset，得到结束项索引值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 
3.监听scroll事件，实现虚拟列表滚动
现在可以通过监听scroll事件，动态更新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: &＃39;absolute&＃39;,        top: 0,        left: 0,        width: &＃39;100%&＃39;,
        [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(&＃39;#virtual-list&＃39;);
  },

  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);
  },
});

  
    
      {{ item + 1 }}
    
  
  {{itemCount}}
以上就是在微信小程序中实现virtual-list的方法详解的详细内容，更多请关注其它相关文章！