# 虚拟滚动 -- vue实现方式

已于 2023-07-05 18:32:24 修改
阅读量414 收藏 1
点赞数
文章标签： vue.js javascript 前端
于 2023-07-05 18:30:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45062275/article/details/131561761
版权

文章目录

一、元素固定高度的虚拟列表

<!-- 使用页面 page.vue -->
<template>
  <FixedSizeList
    className="list"
    :height="200"
    :width="200"
    :itemSize="50"
    :itemCount="1000"
  />
</template>
<script setup>
import FixedSizeList from './components/FixedSizeList.vue'
</script>
<!-- 容器组件 FixedSizeList.vue-->
<script setup>
import { ref } from 'vue'
import Row from './Row.vue'
const props = defineProps(['height', 'width', 'itemSize', 'itemCount'])
const scrollOffset = ref(0)

// 外部容器高度
const containerStyle = {
  position: 'relative',
  width: props.width + 'px',
  height: props.height + 'px',
  overflow: 'auto',
}

// 1000个元素撑起盒子的实际高度
const contentStyle = {
  height: props.itemSize * props.itemCount + 'px',
  width: '100%',
}

const getCurrentChildren = () => {
  // 可视区起始索引
  const startIndex = Math.floor(scrollOffset.value / props.itemSize)

  // 上缓冲区起始索引
  const finialStartIndex = Math.max(0, startIndex - 2)

  // 可视区能展示的元素的最大个数
  const numVisible = Math.ceil(props.height / props.itemSize)

  // 下缓冲区结束索引
  const endIndex = Math.min(props.itemCount - 1, startIndex + numVisible + 2)

  const items = []
  // 根据上面计算的索引值，不断添加元素给container
  for (let i = finialStartIndex; i < endIndex; i++) {
    const itemStyle = {
      position: 'absolute',
      height: props.itemSize + 'px',
      width: '100%',
      // 计算每个元素在container中的top值
      top: props.itemSize * i + 'px',
      idx: i,
    }
    items.push(itemStyle)
  }
  return items
}

const currentChildren = ref([])
currentChildren.value = getCurrentChildren()
// 当触发滚动就重新计算
const scrollHandle = (event) => {
  const { scrollTop } = event.currentTarget
  scrollOffset.value = scrollTop
  currentChildren.value = getCurrentChildren()
}
</script>

<template>
  <div :style="containerStyle" :onScroll="scrollHandle">
    <div :style="contentStyle">
      <Row
        v-for="item in currentChildren"
        :key="item.idx"
        :index="item.idx"
        :style="item"
      />
    </div>
  </div>
</template>

<!-- 内容组件 Row.vue-->
<script setup>
// 一、元素固定高度的虚拟列表
const props = defineProps(['index', 'style'])
</script>

<template>
  <div :style="style">
    {{ `${index} 🥇 ` }}
  </div>
</template>

二、元素不定高度的虚拟列表

<!-- 使用页面 page.vue -->
<template>
  <VariableSizeList
    className="list"
    :height="200"
    :width="200"
    :itemSize="getItemSize"
    :itemCount="1000"
  />
</template>
<script setup>
import FixedSizeList from './components/FixedSizeList.vue'
const rowSizes = new Array(1000)
  .fill(true)
  .map(() => 25 + Math.round(Math.random() * 55))
const getItemSize = (index) => rowSizes[index]
</script>


<!-- 容器组件 FixedSizeList.vue-->
<script setup>
import { ref } from 'vue'
import Row from './Row.vue'

// 元数据
const measuredData = {
  measuredDataMap: {},
  lastMeasuredItemIndex: -1,
}

const estimatedHeight = (defaultEstimatedItemSize = 50, itemCount) => {
  let measuredHeight = 0
  const { measuredDataMap, lastMeasuredItemIndex } = measuredData
  // 计算已经获取过真实高度的项的高度之和
  if (lastMeasuredItemIndex >= 0) {
    const lastMeasuredItem = measuredDataMap[lastMeasuredItemIndex]
    measuredHeight = lastMeasuredItem.offset + lastMeasuredItem.size
  }
  // 未计算过真实高度的项数
  const unMeasuredItemsCount =
    itemCount - measuredData.lastMeasuredItemIndex - 1
  // 预测总高度
  const totalEstimatedHeight =
    measuredHeight + unMeasuredItemsCount * defaultEstimatedItemSize
  return totalEstimatedHeight
}

const getItemMetaData = (props, index) => {
  const { itemSize } = props
  const { measuredDataMap, lastMeasuredItemIndex } = measuredData
  // 如果当前索引比已记录的索引要大，说明要计算当前索引的项的size和offset
  if (index > lastMeasuredItemIndex) {
    let offset = 0
    // 计算当前能计算出来的最大offset值
    if (lastMeasuredItemIndex >= 0) {
      const lastMeasuredItem = measuredDataMap[lastMeasuredItemIndex]
      offset += lastMeasuredItem.offset + lastMeasuredItem.size
    }
    // 计算直到index为止，所有未计算过的项
    for (let i = lastMeasuredItemIndex + 1; i <= index; i++) {
      const currentItemSize = itemSize(i)
      measuredDataMap[i] = { size: currentItemSize, offset }
      offset += currentItemSize
    }
    // 更新已计算的项的索引值
    measuredData.lastMeasuredItemIndex = index
  }
  return measuredDataMap[index]
}

const getStartIndex = (props, scrollOffset) => {
  let index = 0
  while (true) {
    const currentOffset = getItemMetaData(props, index).offset
    if (currentOffset >= scrollOffset) return index
    index++
  }
}

const getEndIndex = (props, startIndex) => {
  const { height } = props
  // 获取可视区内开始的项
  const startItem = getItemMetaData(props, startIndex)
  // 可视区内最大的offset值
  const maxOffset = startItem.offset + height
  // 开始项的下一项的offset，之后不断累加此offset，知道等于或超过最大offset，就是找到结束索引了
  let offset = startItem.offset + startItem.size
  // 结束索引
  let endIndex = startIndex
  // 累加offset
  while (offset <= maxOffset) {
    endIndex++
    const currentItem = getItemMetaData(props, endIndex)
    offset += currentItem.size
  }
  return endIndex
}

const getRangeToRender = (props, scrollOffset) => {
  const { itemCount } = props
  const startIndex = getStartIndex(props, scrollOffset)
  const endIndex = getEndIndex(props, startIndex)
  return [
    Math.max(0, startIndex - 2),
    Math.min(itemCount - 1, endIndex + 2),
    startIndex,
    endIndex,
  ]
}

const props = defineProps([
  'height',
  'width',
  'itemCount',
  'itemSize',
  'itemEstimatedSize',
])

const scrollOffset = ref(0)

// 外部容器高度
const containerStyle = {
  position: 'relative',
  width: props.width + 'px',
  height: props.height + 'px',
  overflow: 'auto',
  willChange: 'transform',
}

// 1000个元素撑起盒子的实际高度
const contentStyle = {
  height: estimatedHeight(props.itemEstimatedSize, props.itemCount) + 'px',
  width: '100%',
}

const getCurrentChildren = () => {
  const [startIndex, endIndex, originStartIndex, originEndIndex] =
    getRangeToRender(props, scrollOffset.value)
  const items = []
  // 根据上面计算的索引值，不断添加元素给container
  for (let i = startIndex; i < endIndex; i++) {
    const item = getItemMetaData(props, i)
    const itemStyle = {
      position: 'absolute',
      height: item.size + 'px',
      width: '100%',
      top: item.offset + 'px',
      idx: i,
    }
    items.push(itemStyle)
  }
  return items
}

const currentChildren = ref([])
currentChildren.value = getCurrentChildren()
// 当触发滚动就重新计算
const scrollHandle = (event) => {
  const { scrollTop } = event.currentTarget
  scrollOffset.value = scrollTop

  currentChildren.value = getCurrentChildren()
}
</script>

<template>
  <div id="container" :style="containerStyle" :onScroll="scrollHandle">
    <div id="content" :style="contentStyle">
      <Row
        v-for="item in currentChildren"
        :key="item.idx"
        :index="item.idx"
        :style="item"
      />
    </div>
  </div>
</template>

<!-- 内容组件 Row.vue-->
<script setup>
// 一、元素固定高度的虚拟列表
const props = defineProps(['index', 'style'])
</script>

<template>
  <div :style="style">
    {{ `${index} 🥇 ` }}
  </div>
</template>

三、元素动态高度的虚拟列表

<!-- 使用页面 page.vue -->
<template>
  <FixedSizeListPlus
    class="list"
    :height="200"
    :width="200"
    :itemCount="items.length"
    :raw="getOneOfData"
  />
</template>

<script setup>
import FixedSizeListPlus from './components/FixedSizeListPlus.vue'
function getData(fixedHeight = 50) {
  const textStr = `谁说简历没亮点？来了，虚拟滚动的3种实现方式~ React实现方式`
  const items = []
  const itemCount = 1000
  for (let i = 0; i < itemCount; i++) {
    const style = {
      width: '100%',
      height: fixedHeight,
    }
    items.push({
      style: style,
      i,
      value: textStr.slice(parseInt(Math.random() * 30)),
    })
  }
  return items
}

const items = getData()

const getOneOfData = ({ index }) => {
  return items[index]
}
</script>


<!-- 容器组件 FixedSizeListPlus.vue-->
<script setup>
import { ref, onMounted } from 'vue'
import Row from './Row.vue'

// 元数据
const measuredData = {
  measuredDataMap: {},
  lastMeasuredItemIndex: -1,
}

const estimatedHeight = (defaultEstimatedItemSize = 50, itemCount) => {
  let measuredHeight = 0
  const { measuredDataMap, lastMeasuredItemIndex } = measuredData
  // 计算已经获取过真实高度的项的高度之和
  if (lastMeasuredItemIndex >= 0) {
    const lastMeasuredItem = measuredDataMap[lastMeasuredItemIndex]
    measuredHeight = lastMeasuredItem.offset + lastMeasuredItem.size
  }
  // 未计算过真实高度的项数
  const unMeasuredItemsCount =
    itemCount - measuredData.lastMeasuredItemIndex - 1
  // 预测总高度
  const totalEstimatedHeight =
    measuredHeight + unMeasuredItemsCount * defaultEstimatedItemSize
  return totalEstimatedHeight
}

const getItemMetaData = (props, index) => {
  const { itemSize } = props
  const { measuredDataMap, lastMeasuredItemIndex } = measuredData
  // 如果当前索引比已记录的索引要大，说明要计算当前索引的项的size和offset
  if (index > lastMeasuredItemIndex) {
    let offset = 0
    // 计算当前能计算出来的最大offset值
    if (lastMeasuredItemIndex >= 0) {
      const lastMeasuredItem = measuredDataMap[lastMeasuredItemIndex]
      offset += lastMeasuredItem.offset + lastMeasuredItem.size
    }
    // 计算直到index为止，所有未计算过的项
    for (let i = lastMeasuredItemIndex + 1; i <= index; i++) {
      const currentItemSize = itemSize ? itemSize(i) : 50
      measuredDataMap[i] = { size: currentItemSize, offset }
      offset += currentItemSize
    }
    // 更新已计算的项的索引值
    measuredData.lastMeasuredItemIndex = index
  }
  return measuredDataMap[index]
}

const getStartIndex = (props, scrollOffset) => {
  let index = 0
  while (true) {
    const currentOffset = getItemMetaData(props, index).offset
    if (currentOffset >= scrollOffset) return index
    index++
  }
}

const getEndIndex = (props, startIndex) => {
  const { height } = props
  // 获取可视区内开始的项
  const startItem = getItemMetaData(props, startIndex)
  // 可视区内最大的offset值
  const maxOffset = startItem.offset + height
  // 开始项的下一项的offset，之后不断累加此offset，知道等于或超过最大offset，就是找到结束索引了
  let offset = startItem.offset + startItem.size
  // 结束索引
  let endIndex = startIndex
  // 累加offset
  while (offset <= maxOffset) {
    endIndex++
    const currentItem = getItemMetaData(props, endIndex)
    offset += currentItem.size
  }
  return endIndex
}

const getRangeToRender = (props, scrollOffset) => {
  const { itemCount } = props
  const startIndex = getStartIndex(props, scrollOffset)
  const endIndex = getEndIndex(props, startIndex)
  return [
    Math.max(0, startIndex - 2),
    Math.min(itemCount - 1, endIndex + 2),
    startIndex,
    endIndex,
  ]
}

const props = defineProps([
  'height',
  'width',
  'itemCount',
  'itemSize',
  'itemEstimatedSize',
  'raw',
])

const scrollOffset = ref(0)

// 外部容器高度
const containerStyle = {
  position: 'relative',
  width: props.width + 'px',
  height: props.height + 'px',
  overflow: 'auto',
  willChange: 'transform',
}

// 1000个元素撑起盒子的实际高度
const contentStyle = {
  height: estimatedHeight(props.itemEstimatedSize, props.itemCount) + 'px',
  width: '100%',
}

const getCurrentChildren = () => {
  const [startIndex, endIndex, originStartIndex, originEndIndex] =
    getRangeToRender(props, scrollOffset.value)
  const items = []
  // 根据上面计算的索引值，不断添加元素给container
  for (let i = startIndex; i < endIndex; i++) {
    const item = getItemMetaData(props, i)
    const itemStyle = {
      position: 'absolute',
      width: '100%',
      top: item.offset + 'px',
      idx: i,
    }
    items.push(itemStyle)
  }
  return items
}

const currentChildren = ref([])
currentChildren.value = getCurrentChildren()

// =============与不等高的区别:👇===============
onMounted(() => {
  currentChildren.value = getCurrentChildren()
})

// 增加 sizeChangeHandle：渲染新的内容时，更新当前dom的高度，并重新计算所有的偏移量offset
const sizeChangeHandle = (index, domNode) => {
  const height = domNode.offsetHeight
  const { measuredDataMap, lastMeasuredItemIndex } = measuredData

  const itemMetaData = measuredDataMap[index]
  itemMetaData.size = height

  let offset = 0
  for (let i = 0; i <= lastMeasuredItemIndex; i++) {
    const itemMetaData = measuredDataMap[i]
    itemMetaData.offset = offset
    offset += itemMetaData.size
  }
}
// ==============与不等高的区别 end:===============

// 当触发滚动就重新计算
const scrollHandle = (event) => {
  const { scrollTop } = event.currentTarget
  scrollOffset.value = scrollTop

  currentChildren.value = getCurrentChildren()
}
</script>

<template>
  <div id="container" :style="containerStyle" @scroll="scrollHandle">
    <div id="content" :style="contentStyle">
      <Row
        v-for="item in currentChildren"
        :key="item.idx"
        :index="item.idx"
        :style="item"
        :onSizeChange="sizeChangeHandle"
        :raw="raw"
      />
    </div>
  </div>
</template>

<style scoped>
#container #content > div:nth-child(odd) {
  background: rgba(90, 118, 211, 0.5);
}
</style>

<!-- 内容组件 Row.vue-->
<script setup>
// 一、元素固定高度的虚拟列表
const props = defineProps(['index', 'style', 'raw', 'onSizeChange'])

// =============与不等高的区别:👇===============
const domRef = ref(null)
onMounted(() => {
  const { index, onSizeChange } = props
  onSizeChange?.(index, domRef.value)
})
// =============与不等高的区别:end===============
</script>

<template>
  <div ref="domRef" :style="style">
    {{ `${index} 🥇 ${raw?.({ index }).value || ''}` }}
  </div>
</template>
Enjoy-li
关注
vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree
Brad_chao的博客
11-01 2万+
目录 源 卡顿假死 预研 开发 业务中使用 组件中引入 功能列表 使用 源 由于业务开发过程中有树形数据，因此需要用到tree树形组件，鉴于项目是基于vue的，前期的ui组件库选型就是element-ui，于是采用了el-tree组件。但在实际使用过程中出现了几个意外。 卡顿假死 server端返回全部数据时，渲染全量的tree组件时前端直接卡死，排查发现业务数据大部分子节点的量级在万以上。页面卡死这种事是要直接“掉脑袋”的，马上换成懒加载模式。 改成懒加载模式后，前两层节点的
基于Vue.js的强大的虚拟滚动条.zip
09-24
基于Vue.js的强大的虚拟滚动条.zip,A scrolling plugin with a easy getting-start and full configuration for Vue.js.
vue之虚拟滚动
在路上`的博客
01-15 3475
以上代码中，RecycleScroller会渲染dataList中的数据，每个列表项的高度是50px，使用页面模式和垂直滚动，渲染缓冲区大小是200px，预渲染10个列表项，并在列表项更新时触发update事件。在页面模式下，滚动容器是document.documentElement，否则是RecycleScroller自身。虚拟滚动的原理是只渲染可视区域内的数据，当用户滚动时，动态计算并渲染新的可视数据，从而实现大数据量的流畅滚动。item-size：数字，每个列表项的大小（高度或宽度）。
Vue中实现虚拟滚动技术（可直接复制）
最新发布
Lyy_ID的博客
09-18 923
虚拟滚动技术通过动态渲染可视区域内的元素，可以显著提高长列表的性能。在Vue中，我们可以通过计算属性和生命周期钩子来实现这一技术，为用户提供流畅的滚动体验。
Vue 虚拟滚动
全村的希望的博客
06-21 2825
虚拟滚动（Virtual Scrolling）是一种优化大型列表渲染性能的技术，在Vue中也有对应的实现方式。虚拟滚动可以提高大量数据列表的性能和响应速度，减少页面的渲染开销。你可以根据自己的实际情况选择合适的虚拟滚动库，并根据库的文档进行配置和使用。库会根据滚动的位置动态渲染可见区域的数据项，只渲染在视图中可见的数据，而不是将所有数据项都渲染出来，从而提高性能。这些库提供了虚拟滚动的组件或指令，可以方便地将虚拟滚动应用到Vue项目中。在Vue中实现虚拟滚动的一种常见方式是使用第三方库，比如。
vue 虚拟滚动实现
wxid_mtnujb6ipc0322的博客
05-10 999
vue列表虚拟滚动
VueJS2x的虚拟滚动条组件
08-10
VueJS 2x的虚拟滚动条组件
av-table是居于ant-design-vue（版本3.2.20） 的 a-table组件封装的虚拟列表组件.zip
04-02
在这个场景中，我们关注的是 "av-table"，这是一个针对 Ant Design Vue 的 a-table 组件进行封装的虚拟列表组件。 首先，让我们深入理解 Ant Design Vue 的 a-table 组件。a-table 是 Ant Design Vue 的核心组件之...
vue-virtual-collection:Vue组件，用于有效地呈现大型集合数据
05-26
虚拟虚拟收藏 Vue组件，用于有效地呈现大型集合数据。 受启发。 用生成的目录 cellSizeAndPositionGetter 收藏 宽度 高度 scrollToBottomRange containerPaddingBottom headerSlotHeight sectionSize 大事记 ...
基于vueuse的api实现的虚拟滚动和无限滚动列表
11-10
博主在使用 Vue 3 和 Vite 4 构建的项目中，基于 vueuse 提供的丰富 API，成功实现了虚拟滚动和无限滚动列表的功能，这一成果充分展现了博主在前端开发领域的深厚技术功底和创新能力。 首先，博主通过充分利用 vue...
big-screen-vue-master
03-10
- 对于大数据量的图表，考虑使用分页、虚拟滚动等策略，避免一次性加载过多数据。 - 考虑响应式设计，确保在不同分辨率和比例的屏幕上都能有良好的展示效果。 总的来说，"big-screen-vue-master"项目提供了一个基于...
Vuescroll是一个基于vuejs2X的虚拟滚动条
08-08
Vuescroll 是一个基于 vue.js 2.X的虚拟滚动条，它拥有多个模式可供你选择： slide 模式、native 模式和pure-native模式， 并且它还支持定制滚动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多功能。
vue-virtual-scroller插件实现不等高表格虚拟滚动
Hi_MrXiao的博客
09-02 991
这是因为vue-virtual-scroller插件使用了超过浏览器理解的js代码，需要转换为旧版es5规范的代码浏览器才能正常执行。对于大量的表格数据加载，如果我们全部加载不仅面临加载等待时间长，容易崩溃的问题，还有可能导致浏览器缓存数据量大而导致页面使用卡顿的情况。在页面中使用，不等高的列表需要使用DynamicScroller+DynamicScrollerItem这种方式。加载来优化这种情况，在这里我们使用插件vue-virtual-scroller来实现虚拟滚动。使用过程中可能存在的问题。
前端虚拟滚动列表 vue虚拟列表
夜空孤狼啸的博客
03-31 7376
前端虚拟滚动列表 vue虚拟列表。在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题；大数据量列表性能优化，减少真实dom的渲染看图：绿色是显示区域，绿色和蓝色中间属于预加载：解决滚动闪屏问题；大致了解了流程在往下看；
如何用React + Rxjs实现一个虚拟滚动组件？
weixin_34347651的博客
01-23 188
为什么使用虚拟列表在我们的业务场景中遇到这么一个问题，有一个商户下拉框选择列表，我们简单的使用 antd 的 select 组件，发现每次点击下拉框，从点击到弹出会存在很严重的卡顿，在本地测试时，数据库只存在370条左右数据，这个量级的数据都能感到很明显的卡顿了（开发环境约700+ms），更别提线上 2000+ 的数据了。Antd 的 select 性能确实不敢恭维，它会简单的将全部数据 map ...
VUE简单实现一个虚拟滚动。
weixin_50395373的博客
07-16 1269
最近项目中有用到vue3中的虚拟滚动，但中间又用到了动态行高。找了找网上的虚拟滚动插件都不太适用，只好自己写了一个乞丐版能满足自己需求的东西。 具体思路 就是将全部数组切分一下，只取渲染的数组，然后滚动时，再设置偏移量，使其滚动。 1. 创建一个组件，将需要虚拟滚动的数组传入进来。 获得屏幕的高度，然后再算出能展示的最大数量。 2。获取滚动的高度，再切分数组，设置偏移量。 这样，一个简单的虚拟滚动就实现了。 ...
【vue】vue高性能虚拟滚动列表【vue2和vue3版组件封装】
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
06-30 4601
containerHeight高度(容器高度)和数据列表listData。containerHeight高度(容器高度)和数据列表listData。containerHeight高度(容器高度)和数据列表listData。之渲染可视窗口的列表，其他列表不进行渲染。virtualList 组件包。virtualList 组件包。virtualList 组件包。评论，你的意见是我进步的财富！应用virtualList。应用virtualList。
使用vue实现高性能虚拟滚动组件
不知名攻城狮的博客
03-22 3322
<template> <div> <div :style="`height:${viewH}px;overflow-y:scroll;`" @scroll="hanldeScroll"> <div :style="{height:scorllH}"> <div class="item_box...
Vue3虚拟滚动hook实现与应用
综上所述，useVirtualScroll hook是一个功能丰富的虚拟滚动解决方案，它充分利用了Vue3的 Composition API 和 TypeScript 的类型系统，提供了高效的虚拟滚动实现，并支持动态行高和网格列数计算，旨在为Vue3项目提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值