长列表优化:简单实现个可以无限滚动的虚拟列表

实现思路:

1、数据分片: 将要显示的数据单独拿出来,而不是将所有数据一次性加载到页面上。这可以减少页面渲染时的负担

2、可视区域管理: 只渲染用户当前可见的部分内容,即视口中的数据。当用户滚动列表时,动态地加载新的数据块进入视口,并移除离开视口的数据块

3、滚动事件监听: 用户滚动时加载新的渲染数据列表。可以根据滚动位置来计算当前应该显示哪些数据。滚动事件可以加上节流函数优化性能

Vue3 + TS 实例

js 复制代码
<template>
  <div class="container" ref="containerRef">
    <ul class="list">
      <li v-for="(item, index) in visibleItems" :key="key ? item[key] : index" :style="`height: ${itemHeight}px;`" >
        <slot :item="item" :index="index" ></slot>
      </li>
      <div ref="bottomRef" ><slot name="bottom"></slot></div>
    </ul>
    <div class="placeholder" :style="`height: ${placeholderHeight}px;`" ></div>
  </div>
</template>

<script setup lang="ts">
  import { ref, toRefs, computed, onMounted } from 'vue';

  const props = defineProps({
    /** 列表数据 */
    data: {
      default: [],
      type: Array<any>
    },
    /** 列表项高度 */
    itemHeight: {
      default: 50,
      type: Number
    },
    /** 列表项唯一标识字段, 默认index */
    key: {
      default: '',
      type: String
    }
  })

  const { data, itemHeight } = toRefs(props)
  const containerRef = ref<HTMLElement | null>(null);
  const bottomRef = ref<HTMLElement | null>(null);
  const visibleHeight = ref(0) // 可视区域的高度

  onMounted(() => {
    visibleHeight.value = containerRef.value?.clientHeight || 0
    containerRef.value?.addEventListener('scroll', scrollEvent)
  })

  /** 渲染列表的数量 */
  const visibleNum = computed(() => {
    return visibleHeight.value / itemHeight.value * 2
  })

  /** 可视范围起始索引 */
  const startIndex = ref(0);
  /** 可视范围数据 */
  const visibleItems = computed(() => {
    return data.value.slice(startIndex.value, startIndex.value + visibleNum.value)
  })
  
  /** 整个列表的高度 */
  const placeholderHeight = computed(() => {
    const bottomRefHeight = bottomRef.value?.clientHeight || 0
    const bottomHeight = bottomRefHeight && itemHeight.value > bottomRefHeight ? itemHeight.value : bottomRefHeight
    return data.value.length * itemHeight.value - visibleHeight.value + bottomHeight + 7
  })

  /** 滚动事件 */
  const scrollEvent = (event: HTMLElementEventMap['scroll']) => {
    if(!event?.target) return
    const dom = event.target as HTMLElement
    const { scrollTop } = dom 
    startIndex.value = Math.floor(scrollTop / itemHeight.value)
    
    if(scrollTop <= 0 ) {
      return emits('touchTop')
    }
    if(scrollTop + 100 >= placeholderHeight.value ) {
      return emits('touchBottom')
    }
  }

  const emits = defineEmits(['touchTop', 'touchBottom'])
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  &::-webkit-scrollbar {
    width: 8px;
    background-color: #dfdfdf;
  }
  &::-webkit-scrollbar-thumb {
    background: #999999;
  }
  &::-webkit-scrollbar-thumb:hover{
    background: #707070;
  }
}
.list{
  width: 100%; height: 100%;
  position: sticky;
  top: 0; left: 0;
  list-style: none;
}
</style>
相关推荐
Spider_Man2 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia7 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李9 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风10 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录11 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia11 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽13 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥14 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023417 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder23 分钟前
Vite Devtools 要发布了!期待
前端·面试·github