位置: IT常识 - 正文

vue长列表优化之虚拟列表实现(vue 长列表优化)

编辑:rootadmin
vue长列表优化之虚拟列表实现 vue长列表优化之虚拟列表实现

推荐整理分享vue长列表优化之虚拟列表实现(vue 长列表优化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue经典的列表和编辑的问题,vue列表数据量太大如何显示,vue 长列表优化,vue无限滚动长列表优化,vue 列表,vue无限滚动长列表优化,vue无限滚动长列表优化,vue 长列表优化,内容如对您有帮助,希望把文章链接给更多的朋友!

应用场景:后台一次性发送上千条或更多数据给前台

场景模拟:用户发起一个请求,后台发送了10w条数据

使用虚拟列表之前:前台需要生成10w个dom节点用来渲染页面

使用虚拟列表之后:前台只需要生成少量dom节点(dom节点数量取决于前端视图需要展示的数量),就可以实现对这10w条数据的视图渲染

总之:虚拟列表就是固定dom节点数量,通过修改dom节点的内容而达到不重新增加(或删除)dom节点来实现列表的更新

1.实现原理

监听页面滚动,获取滚动的高度scrolltop根据scrolltop,可以知道当前应该展示哪一段数据(即获取要展示数据的index)根据当前展示的数据在长列表中的index,对列表进行偏移

实现思路是这样的:

设置列表初始值

需要展示给用户的数量showNum列表item的高度itemHeight需要展示的第一条数据的下标start需要展示的最后一条数据的下标end通过start和end已经showNum,我们可以得到需要展示的列表项showList,我们可以通过vue的计算属性来实时获取新的showList

建立列表视图模型

给列表视图设置高度ListWrapHeight根据itemHeight和showNum,我们可以得到列表总高度ListHeight,我们必须要使得ListHeight高度大于ListWrapHeight,这样才能实现滚动

监听页面滚动

给列表视图模型设置监听函数,每当列表视图发生滚动,就执行回调,获取滚动高度scrolltop通过scrolltop和itemHeight我们可以得到新的start以及end,从而获取到新的showList通过start和itemHeight我们可以给list设置偏移(translate),从而达到让start对应的数据展示在视图模型的效果vue长列表优化之虚拟列表实现(vue 长列表优化)

注意:列表视图模型和列表并不是一个东西,视图模型表示者页面供列表展示的一块区域,而列表表示的是需要展示的列表项总高度

这是列表视图模型

这是列表

列表中超出视图模型的节点就被隐藏了

为什么限制了展示列表项的长度(限制了dom数量),视图模型还能持续滚动?

给列表设置translate会增大列表的高度,既然list的高度变大了,那么视图模型就可以继续滚动

​ 实现代码

​ 以vue3为例(不管是vue2或是vue3,实现虚拟列表的核心代码都是相同的,即监听滚动,赋新值)

<div ref="listWrap" class="list-wrap" @scroll="scrollListener"> <div class="list" ref="List"> <slot v-for="item in showList" :songInfo="item" :key="item.id"></slot> </div> </div> setup(props) { const list = ref(props.list); //长列表数据 const itemHeight = ref(props.itemHeight); //item高度 const showNum = ref(props.showNum); //展示的数据 const start = ref(props.start); //滚动过程中的开始索引 const end = ref(props.end); //滚动过程中的结束索引 const listWrap = ref(null); //获取列表视图模型节点 const List = ref(null)//获取列表节点 onMounted(() => { listWrap.value.style.height = itemHeight.value * showNum.value + "px";//设置列表视图模型的高度 }); const showList = computed(() => { //获取展示的列表 return list.value.slice(start.value, end.value); }); const scrollListener = (() => { //获取滚动高度 let scrollTop = listWrap.value.scrollTop; //开始的数组索引 start.value = Math.floor(scrollTop / itemHeight.value); //结束索引 end.value = start.value + showNum.value; List.value.style.transform = `translateY(${start.value * itemHeight.value}px)`//对列表项进行偏移 }) return { ... }; },

效果:

节点变化

可以看到不论列表如何变化,列表dom的数量并没有新增

本文链接地址:https://www.jiuchutong.com/zhishi/295694.html 转载请保留说明!

上一篇:Windows10系统CUDA和CUDNN安装教程(WINDOWS10系统怎样给电脑分区)

下一篇:常见气象数据获取方式及批量下载代码汇总(气象数据32766)

  • 一键还原是什么意思(一键还原有用吗)

    一键还原是什么意思(一键还原有用吗)

  • 苹果设备名称在哪里改(苹果设备名称在哪里看)

    苹果设备名称在哪里改(苹果设备名称在哪里看)

  • 黑鲨2pro屏幕刷新率(黑鲨2pro屏幕刷新率在哪里改)

    黑鲨2pro屏幕刷新率(黑鲨2pro屏幕刷新率在哪里改)

  • 华为手机发信息带特效吗(华为手机发信息怎么隐藏自己的号码)

    华为手机发信息带特效吗(华为手机发信息怎么隐藏自己的号码)

  • 微信表情里的骰子怎么没了(微信表情里的骰子在哪里)

    微信表情里的骰子怎么没了(微信表情里的骰子在哪里)

  • 苹果手机应用宝怎么下载(苹果手机应用宝怎么下载不了)

    苹果手机应用宝怎么下载(苹果手机应用宝怎么下载不了)

  • 安卓充电头可以充苹果吗(安卓充电头可以充苹果13吗)

    安卓充电头可以充苹果吗(安卓充电头可以充苹果13吗)

  • 苹果手机id和密码都忘了怎么办(苹果手机id和密码)

    苹果手机id和密码都忘了怎么办(苹果手机id和密码)

  • 手机wps有艺术字吗(手机wps有艺术字功能吗)

    手机wps有艺术字吗(手机wps有艺术字功能吗)

  • 通知分组按app什么意思

    通知分组按app什么意思

  • 三星最早的翻盖手机(三星最早的翻盖手机白色玻璃是什么)

    三星最早的翻盖手机(三星最早的翻盖手机白色玻璃是什么)

  • 快手发的视频怎么删除(快手发的视频怎么删除掉)

    快手发的视频怎么删除(快手发的视频怎么删除掉)

  • 健康码怎么查询(健康码怎么查询家人的)

    健康码怎么查询(健康码怎么查询家人的)

  • 抖音未登录看别人视频会有记录吗(抖音未登录看别人直播)

    抖音未登录看别人视频会有记录吗(抖音未登录看别人直播)

  • 怎样删除qq自动回复(怎样删除qq自动回复的语句)

    怎样删除qq自动回复(怎样删除qq自动回复的语句)

  • 12306买票支持京东白条吗(12306买不了去北京的票)

    12306买票支持京东白条吗(12306买不了去北京的票)

  • 手机上能不能办银行卡(手机上能不能办护照)

    手机上能不能办银行卡(手机上能不能办护照)

  • 苹果蓝牙耳机按键功能(苹果蓝牙耳机按键使用方法图解)

    苹果蓝牙耳机按键功能(苹果蓝牙耳机按键使用方法图解)

  • vivox27通话设置在哪里(vivo手机如何设置通话)

    vivox27通话设置在哪里(vivo手机如何设置通话)

  • 怎么保存淘宝主图视频(怎么保存淘宝主图)

    怎么保存淘宝主图视频(怎么保存淘宝主图)

  • 苹果11什么时候正式发售(苹果11什么时候生产的)

    苹果11什么时候正式发售(苹果11什么时候生产的)

  • 信息采集技术有哪些(信息采集技术有哪些内容)

    信息采集技术有哪些(信息采集技术有哪些内容)

  • 苹果手机pin码在哪里能看到(苹果手机PIN码在哪里关闭)

    苹果手机pin码在哪里能看到(苹果手机PIN码在哪里关闭)

  • iphonex充电须知(iphonex 充电)

    iphonex充电须知(iphonex 充电)

  • 华为荣耀20怎么设置时间(华为荣耀20怎么投屏到电视)

    华为荣耀20怎么设置时间(华为荣耀20怎么投屏到电视)

  • win10下怎么设置OneDrive云删除文件时不要警告?(win10系统怎么设置)

    win10下怎么设置OneDrive云删除文件时不要警告?(win10系统怎么设置)

  • 过来人告诉你:Java学到什么程度可以找工作?(过来人告诉你:女人最珍贵的三种东西,舍得给你说明爱你)

    过来人告诉你:Java学到什么程度可以找工作?(过来人告诉你:女人最珍贵的三种东西,舍得给你说明爱你)

  • 收到退税款怎么入账
  • 什么是一般业务
  • 零售和批发的界定
  • 以前年度损益结转到未分配利润
  • 个人缴纳职业年金是什么意思
  • 建筑业预缴企业所得税
  • 定期定额不开票违法吗
  • 工厂开不了发票
  • 股东入股的标准
  • 小规模销售免税农产品的分录
  • 季度利润表不包括什么
  • 小微企业免税销售额和未达起征点销售额
  • 去年的费用票会计分录
  • 进账多于销项怎样报税
  • 农产品流通环节有哪些
  • 进料边角料内销作进口报关单时为何要在备注栏备注活期
  • 其他应收款账户期初借方余额为35400
  • 专利技术评估价值入股价偏高说明什么
  • 原材料做成库存会计分录
  • 税务行政复议范围不包括
  • 可以把两张发票合写在记账凭证上吗
  • 内部收益率的计算步骤有
  • 固定资产加速折旧方法
  • 收到上级补助收入怎么记账
  • 收到政府补贴要交增值税吗
  • 工程类劳务发票
  • 跨期发票如何进行会计处理?
  • 主营业务收入多计跨年调整
  • 公司开业需要怎么布置
  • php大量数据处理
  • windows 11截图
  • 抵扣了进项税额
  • 营改增后,个人转让房屋的个人所得税
  • 培训类产品
  • 【2023亲测可用】JS 获取电脑本地IP 和 电脑网络IP(外网IP|公网IP)
  • php官方文档
  • php安装及使用教程
  • 核定征收的企业所得税怎么算
  • python输入三个数判断能否构成三角形
  • 质保金企业所得税纳税时间
  • 农村扶贫入股分红会计分录
  • 航天税盘服务费全额抵扣报税流程
  • 留底税额怎么入账
  • 资本公积的项目有哪些
  • 税务法新规
  • 会计需要装订资料有哪些
  • sqlserver 15247
  • 4s店开的维修发票怎么开
  • 多用途卡的监管机构是
  • 员工工资可以当月计提当月发放吗
  • 受托代销商品款是什么类账户
  • 出口退税企业退税流程
  • 支付厂房租金计入什么会计科目
  • 土地的入账科目
  • sql返回一条数据
  • 服务器上文件共享
  • centos安装类型选择
  • window系统大全
  • linux限制用户登录
  • linux内核驱动开发书籍
  • VirtualBOX给CentOS建共享文件夹的方法
  • 自动批处理文件的名字是什么
  • xp系统进入桌面后没反应
  • win10系统怎么关闭病毒防护
  • unity3d跑酷游戏推荐
  • android:LruCache缓存小结
  • perl中\s+
  • js格式化日期yyyy-mm-dd hh:mm:ss
  • vue框架写淘宝购物车
  • json对象转化为list
  • android:imeOptions属性
  • 用js实现类的方法
  • 微信收款商业版和个人经营收款码区别
  • 房产契税退税在哪里办理
  • 按时交纳党费
  • 社会福利企业可以投资吗
  • 国家税务北京税务局
  • 预缴增值税是否要预缴城建税及附加
  • 郑州土地出让金2023年多少
  • 纳税服务理念创新不足
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设