位置: 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)

  • 营业执照备案需要什么资料
  • 水利建设基金一定要交吗
  • 董事长费用可以在公司报销吗
  • 开发票要多交费正常吗?
  • 供货方提供安装材料
  • 营改增是好事还是坏事
  • 非居民企业所得税核定利润率
  • 医疗器械行业进销存软件
  • 员工替公司垫付的费用还没有报销就被开除了
  • 委托加工几个点
  • 投资收益涉及税种
  • 分公司开票总公司收款行吗
  • 个体工商户如何给员工交社保
  • 季度报没有报怎么办
  • 个体户金税盘清卡失败怎么办
  • 用工会经费发放福利
  • 主营业务成本没有结转怎么办
  • 企业所得税季报人数怎么填
  • 印花税查账征收和核定征收计算
  • 社保银行扣款未扣怎么办
  • 一般纳税人不能转为小规模纳税人吗
  • 收到工程结算单,怎么回复不认可
  • 解决脱发的8个方法
  • 奖金扣税标准税率表
  • 企业转让房产需要开具发票吗
  • win11专业版网卡安不了
  • 以前年度多计提的工资怎么处理
  • 拓展销售市场发生的业务招待费计入
  • 政府补助的会计处理分录
  • php get函数
  • 人工智能专业计算机科学与技术
  • php图片库
  • vue项目部署后白屏
  • SM1、SM2、SM3、SM4、同态加密、密态计算、隐私计算和安全多方计算的概念
  • 一阶段目标检测算法
  • 用友固定资产折旧方法
  • 增值税发票有什么用途和作用
  • 职工教育经费申报表如何填写
  • 土地出让与土地划拨有什么区别
  • 其他应收款借贷方表示什么意思
  • 支付运输费计入
  • 企业分配股权
  • mysql索引失效的几个场景
  • 应收预收应付预付科目怎么合并
  • 出口退税是先交税后退税吗
  • 去年亏损今年盈利能分红吗
  • 房屋免租期的房子能卖吗
  • 税务滞纳金计入什么会计科目
  • 权益法下股权投资包括
  • 如何证明自己是中国人
  • 公司往来借款怎么做账
  • 服务费税额部分计算公式
  • 固定资产如何管理可以做到节能减排
  • mysql a.
  • mysql 从库
  • mysql 5.6新特性
  • sql语句去除重复值
  • win7桌面和win10桌面
  • bois开启usb功能
  • camrec是什么文件
  • 登录ip怎么查位置
  • window8输入法怎么设置
  • w10操作系统内部版本
  • linux如何配置双网卡
  • linux 磁带机
  • win10没空间
  • jquery验证码
  • ansi std
  • python常见算法
  • javascript教程完整版
  • javascript获取数据类型
  • jquery中遍历指定的对象和数组是哪个方法
  • javascript中hasOwnProperty() 方法使用指南
  • javascript例题
  • android入门教程
  • jquery.validate使用详解
  • 拆迁户契税减免政策文件
  • 山东地税app
  • 国税局地点
  • 怎样在网上税务局个人发票能开10万以上?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设