最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

虚拟列表

来源：博客园


(资料图片仅供参考)

情景：后端一次性传了10000条数据（假设存在），需要前端展示。若真的一次性全部展示出来性能消耗大，一万条数据不明显，十万条呢，肯定会导致页面卡顿的。实现思路：使用虚拟列表实现，其实和分页类似，就是前端自己裁剪数据，一次性值展现固定量的数据。如果使用element-plus可以直接使用他们的虚拟化表格，这里就不过多展示了。布局：三个div,大的容器，大的放滚动事件，里面放两个小的div，一个用来撑开容器，另一个作为可视区域。步骤1：监听滚动事件，在里面获取scrollTop，计算开始位置，开始位置其实就是scrollTop/height。步骤2：按长度切割数组，获取需要渲染的内容。
<script setup lang="ts">import { computed, onMounted, reactive, ref } from "vue";let start = ref(0),  size = ref(10),  height = ref(20),  scrollTop = ref(0),  totalList = reactive([]);const virtualListID = ref(null);onMounted(() => {  for (let i = 0; i < 10000; i++) {    totalList.push(`第${i}个`);  }  virtualListID.value.style.height = height.value * size.value + "px";});// 需要渲染的数组const needRenderList = computed(() => {  return totalList.slice(start.value, start.value + size.value);});const handleScroll = () => {  scrollTop.value = virtualListID.value.scrollTop;  // 开始的位置等于滚动的距离除高度  start.value = scrollTop.value / height.value;};</script>
效果图：
                 

关键词：