虚拟列表处理后端返回的多条数据

最新推荐文章于 2024-12-04 16:30:04 发布

Math.random( ) ;

最新推荐文章于 2024-12-04 16:30:04 发布

阅读量247

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/xcxcsdn/article/details/125523737

版权

本文通过结合‘康熙选秀’的例子，介绍了如何利用虚拟列表技术处理后端返回的大量数据，有效解决了前端渲染性能问题，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="v-scroll" @scroll.passive="doScroll" ref="scrollBox">
    <div :style="blankStyle" style="height: 100%">
      <div v-for="item in tempSanxins" :key="item.id" class="scroll-item">
        <span>{
  { item.msg }}</span>
        <img :src="item.src" />
      </div>
    </div>
  </div>
</template>


<script>
import { throttle } from "../../utils/tools";
export default {
  data() {
    return {
      allSanxins: [], // 所有数据
      itemHiehgt: 150, // 列表每一项的宽度
      boxHeight: 0, // 可视区域的高度
      startIndex: 0, // 元素开始索引
    };
  },
  created() {
    // 模拟请求数据
    this.getAllSanxin(30);
  },
  mounted() {
    // 在mounted时获取可视区域的高度
    this.getScrollBoxHeight();
    // 监听屏幕变化以及旋转，都要重新获取可视区域的高度
    window.onresize = this.getScrollBoxHeight;
    window.on