使用 Vue 实现一个虚拟列表的方法

<列表项 top 坐标值> = <上一项 top 坐标值> + <上一项的高度值>

// 假设使用该数组存储列表每一项的高度
const itemHeightStore = [20, 20, 20, 20, 20]

// 使用该方法，可以算出列表中指定项的 top 坐标值
const getTop = (index) => {
 let sum = 0
 while (index--) sum += itemHeightStore[index] || 0
 return sum
}
// 第一项
getTop(0) // 0

// 第二项
getTop(1) // 20
// ...

const range = {
 start: 0,
 end: 4,
 value: 20
}

// Avl.ts
const SLIGHTLY_UNBALANCED_RIGHT = -1
const SLIGHTLY_UNBALANCED_LEFT = 1
const UNBALANCED_RIGHT = -2
const UNBALANCED_LEFT = 2
// 树结点
class AvlNode<K extends any = any> {
 key: any
 left: AvlNode<K> | null
 right: AvlNode<K> | null
 parent: AvlNode<K> | null
 _height: number
 _prevHeight: number
 constructor(key: K) {
  this.key = key
  this.left = null
  this.right = null
  this.parent = null
  this._height = 0
  this._prevHeight = 0
 }
 // 刷新前的高度，方便平衡操作
 get prevHeight() {
  return this._prevHeight | 0
 }
 get height() {
  return this._height | 0
 }
 set height(value) {
  this._prevHeight = this._height | 0
  this._height = value | 0
 }
 // 左子树高度
 get leftHeight() {
  if (this.left === null) return -1
  return this.left.height | 0
 }
 // 右子树高度
 get rightHeight() {
  if (this.right === null) return -1
  return this.right.height | 0
 }
 // 平衡因子
 get balanceFactor() {
  return this.leftHeight - this.rightHeight
 }
 updateHeight() {
  const { leftHeight, rightHeight } = this
  const height = ((leftHeight > rightHeight "htmlcode">

import { create as createSparseRangeList } from './SparseRangeList'
// 创建一个默认预估高度为 20 的列表项存储对象
const itemHeightStore = createSparseRangeList(wrappedItems.length, 20)
// 设置第二项为 40px
itemHeightStore.setValue(1, 40)
// 获取第二项的高度
itemHeightStore.getValueAt(1) // 40
// 获取列表项的 top 坐标
const top = (index: number): number => {
 if (index === 0) return 0
 // 0 ～ 上一项的高度累加
 const rangeValues = itemHeightStore.intersecting(0, index - 1)
 const sumHeight = rangeValues.reduce((sum: number, rangeValue: any) => {
  const span = rangeValue.end - rangeValue.start + 1
  return sum + rangeValue.value * span
 }, 0)
 return sumHeight
}
top(1) // 20
// 计算列表总高度：
const listHeight = itemHeightStore
 .values()
 .reduce((acc: number, rangeValue: any) => {
  const span = rangeValue.end - rangeValue.start + 1
  const height = rangeValue.value * span
  return acc + height
 }, 0)


计算可视条目
完成了列表项高度的管理，接下来需要解决的重点，就是计算出哪些条目是可视的。
最简单的实现方式，就是直接遍历我们的结点高度存储列表，逐个去跟视口的坐标区间比较，过滤出落在（或部分落在）视口内部的条目。 基于性能考虑，我们当然不能这么简单粗暴。我们可以做以下尝试来提高性能：
一、预估起点条目 + 二分法修正。
通过条目的预估高度或默认高度，算出可能出现在视口的第一条条目。 比如，我们视口上沿坐标（即滚动条滚过的距离）为 100px，我们条目预估高度为 20px，那么，我们可以猜测第一个出现在视口中的条目为 100 / 20 + 1，即第 6 条。 我们直接计算第 6 条的坐标，检查是否落在视口中，根据结果差距，再进行二分法猜测，直到找到真正的起点条目。
二、预估终点条目 + 二分法修正
在算出起点条目后，在使用视口高度除以预估条目高度，算出视口内部可能显示多少项，将起点序号加上这个数量，就是预估的终点条目序号。使用上述一样的修正逻辑，直到找到正确的视口终点条目。
描述可能比较难以理解，下面给出关键片段：


// 内部方法，计算局部渲染数据切片的起止点
private _calcSliceRange() {
 if (!this.dataView.length) {
  return { sliceFrom: 0, sliceTo: 0 }
 }
 // 数据总量
 const MAX = this.dataView.length
 // 视口上边界
 const viewportTop = (this.$refs.viewport as any).scrollTop || 0
 // 视口下边界
 const viewportBottom = viewportTop + this.viewportHeight
 // 预估条目高度
 const estimatedItemHeight = this.defaultItemHeight
 // 从估算值开始计算起始序号
 let sliceFrom = Math.floor(viewportTop / estimatedItemHeight!)
 if (sliceFrom > MAX - 1) sliceFrom = MAX - 1
 while (sliceFrom >= 0 && sliceFrom <= MAX - 1) {
  const itemTop = this._top(sliceFrom)
  // 条目顶部相对于 viewport 顶部的偏移
  const itemOffset = itemTop - viewportTop
  // 1. 该条目距离视口顶部有距离，说明上方还有条目元素需要显示，继续测试上一条
  if (itemOffset > 0) {
   // 二分法快速估算下一个尝试位置
   const diff = itemOffset / estimatedItemHeight!
   sliceFrom -= Math.ceil(diff / 2)
   continue
  }
  // 2. 恰好显示该条目的顶部，则该条目为本次视口的首条元素
  if (itemOffset === 0) break
  // 以下都是 itemOffset < 0
  const itemHeight = this._itemHeight(sliceFrom)
  // 3. 该条目在顶部露出了一部分，则该条目为本次视口的首条元素
  if (itemOffset < itemHeight) break
  // 4. 该条目已被滚出去视口，继续测试下一条
  // 二分法快速估算下一个尝试位置
  const diff = -itemOffset / estimatedItemHeight!
  sliceFrom += Math.ceil(diff / 2)
 }
 // 从估算值开始计算结束序号
 let sliceTo = sliceFrom + 1 + Math.floor(this.viewportHeight / estimatedItemHeight!)
 if (sliceTo > MAX) sliceTo = MAX
 while (sliceTo > sliceFrom && sliceTo <= MAX) {
  const itemTop = this._top(sliceTo)
  const itemHeight = this._itemHeight(sliceTo)
  const itemBottom = itemTop + itemHeight
  // 条目底部相对于 viewport 底部的偏移
  const itemOffset = itemBottom - viewportBottom
  // 1. 该条目的底部距离视口底部有距离，说明下方还有条目元素需要显示，继续测试下一条
  if (itemOffset < 0) {
   // 二分法快速估算下一个尝试位置
   const diff = -itemOffset / estimatedItemHeight!
   sliceTo += Math.ceil(diff / 2)
   continue
  }
  // 2. 恰好显示该条目的底部，则该条目为视口中最后一项
  if (itemOffset === 0) break
  // 3. 该条目在底部被裁剪了一部分，则该条目为本次视口的末项
  if (itemOffset < itemHeight) break
  // 该条目还未出场，继续测试上一条
  // 二分法快速估算下一个尝试位置
  const diff = itemOffset / estimatedItemHeight!
  sliceTo -= Math.ceil(diff / 2)
 }
 // slice 的时候，不含 end，所以 + 1
 sliceTo += 1
 return { sliceFrom, sliceTo }
}


以上就是计算可视区域的核心部分。完整的代码，会在后续给出。
DOM 更新

由于我们是使用 Vue 来实现虚拟列表的，所以 DOM 的更新方面，可以省去大量繁琐的细节管理。 我们只需要关心列表滚动到某处之后，如何计算出当前视口应该出现哪些条目即可。
尽管如此，考虑到滚动的流畅性，以及 IE11 等浏览器的 DOM 操作性能，我们不得不多做很多事情。
批量 DOM 操作


我们可以在 IE11 的开发者工具面板中看到，滚动过程，频繁地往虚拟列表首尾插入、移除结点，会带来非常严重的性能问题。 所以，我们必须控制 DOM 操作的频率。
批量可以部分解决这个问题。
具体的思路是，在滚动回调中，我们计算出可视区域的结点起止序号，不直接应用，而是加上一个额外渲染的数量。 比如我们计算出当前应该渲染 20 ~ 30 这些条目，我们可以在前后各加上 10 个额外渲染的条目，即 10 ~ 40，这样就一次性渲染了 30 个结点。在继续滚动时，我们检查新的起止范围，是否还在 10 ～ 40 范围内，如果是，我们就不做新的结点增删操作。
核心实现：


// 刷新局部渲染数据切片范围
private _updateSliceRange(forceUpdate"color: #ff0000">事件

由于虚拟列表的 DOM 需要不停地生成和销毁，因此，直接在列表项目上绑定事件是非常低效的。 所以，使用事件代理就成了很不错的方案，将事件注册在组件根结点上，再根据 event.target 来区分是由哪个列表项冒泡出来的事件，即可高效处理。
组件实现


import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { createSparseRangeList } from './SparseRangeList'
// 列表项数据包裹，data 字段存放原始数据
// 组件所有操作不应该改变 data 的内容，而是修改该包裹对象的属性
class ItemWrapper {
 // 原始数据
 data: any
 // 数据唯一 key
 key: any
 // 条目高度
 // 1. 正数代表已经计算出来的高度
 // 2. 0 代表未计算的高度，不显示
 // 3. 负数代表需要隐藏的高度，绝对值为已经计算出来的高度，方便取消隐藏
 height: number
 // 记录是否已经根据实际 DOM 计算过高度
 realHeight: boolean
 // 条目在当前过滤视图中的序号
 viewIndex: number
 constructor(data: any, key: any, height: number) {
  this.data = data
  // 数据的唯一id，是初始化数据时候的序号
  // 每次传入的 data 改变，都会重新生成
  this.key = key
  // 条目的高度缓存
  // 1. 用于重建高度存储时快速恢复
  // 2. 用于快速通过数据取高度
  this.height = height  0
  this.realHeight = false
  // 每次生成 dataView 都刷新
  this.viewIndex = -1
 }
}
@Component({ name: 'VList' })
export default class VList extends Vue {
 [key: string]: any
 // 高度存储 不响应式
 private itemHeightStore: any
 // 组件宽度，不设置则为容器的 100%
 @Prop({ type: Number })
 private width"color: #ff0000">总结

以上所说是小白给大家介绍的使用 Vue 实现一个虚拟列表的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

            
            上一篇：小程序如何在不同设备上自适应生成海报的实现方法

            下一篇：基于vue手写tree插件的那点事儿