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

实现思路:

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>
相关推荐
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理9 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python