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

  • 天猫精灵需要连wifi吗(天猫精灵需要连网吗)

    天猫精灵需要连wifi吗(天猫精灵需要连网吗)

  • 笔记本显卡能换吗(笔记本显卡能换其他笔记本吗)

    笔记本显卡能换吗(笔记本显卡能换其他笔记本吗)

  • 微信如何置顶到第一个(微信里面如何可以置顶)

    微信如何置顶到第一个(微信里面如何可以置顶)

  • 小米盒子下载什么软件看电视直播(小米盒子下载什么可以看直播)

    小米盒子下载什么软件看电视直播(小米盒子下载什么可以看直播)

  • 苹果6手机多重(苹果6手机多重多少克)

    苹果6手机多重(苹果6手机多重多少克)

  • 钉钉考试作弊会被发现吗(在钉钉上考试老师能看到学生吗)

    钉钉考试作弊会被发现吗(在钉钉上考试老师能看到学生吗)

  • 华为p20怎么隐藏应用(华为P20怎么隐藏游戏)

    华为p20怎么隐藏应用(华为P20怎么隐藏游戏)

  • 支付宝公众号在哪(支付宝微信公众号)

    支付宝公众号在哪(支付宝微信公众号)

  • iphone11屏幕有一条黑线(iphone11屏幕有一块发黄)

    iphone11屏幕有一条黑线(iphone11屏幕有一块发黄)

  • 京东催单有什么影响(京东催单处理流程)

    京东催单有什么影响(京东催单处理流程)

  • 小米9桌面字体改黑色(小米9桌面字体大小设置)

    小米9桌面字体改黑色(小米9桌面字体大小设置)

  • b站上传视频要审核多久(b站上传视频要审核吗)

    b站上传视频要审核多久(b站上传视频要审核吗)

  • 苹果11手机带不带原装膜(苹果11手机带不带红外线遥控器)

    苹果11手机带不带原装膜(苹果11手机带不带红外线遥控器)

  • 微信男女在哪里改(微信男女在哪里聊天)

    微信男女在哪里改(微信男女在哪里聊天)

  • 投屏什么意思(无线投屏什么意思)

    投屏什么意思(无线投屏什么意思)

  • iphonexr续航时间多久(iphonexr续航一天够吗)

    iphonexr续航时间多久(iphonexr续航一天够吗)

  • windows系统中的桌面是指

    windows系统中的桌面是指

  • 鸿蒙系统是基于安卓吗(鸿蒙系统基于安卓开发的吗)

    鸿蒙系统是基于安卓吗(鸿蒙系统基于安卓开发的吗)

  • vivo怎么弄sos(vivo怎么弄地铁卡)

    vivo怎么弄sos(vivo怎么弄地铁卡)

  • 测距仪是什么(测距仪是什么单位)

    测距仪是什么(测距仪是什么单位)

  • 为什么我的快手没有查找(为什么我的快手没有亲密关系)

    为什么我的快手没有查找(为什么我的快手没有亲密关系)

  • 12306候补显示灰色和蓝色有什么区别(12306候补显示灰色叉)

    12306候补显示灰色和蓝色有什么区别(12306候补显示灰色叉)

  • 通常三个字符的口令破解需要多少时间(通常三个字符的长度为)

    通常三个字符的口令破解需要多少时间(通常三个字符的长度为)

  • 拼多多二级限制怎么解除(拼多多二级限制后怎么恢复流量)

    拼多多二级限制怎么解除(拼多多二级限制后怎么恢复流量)

  • 苹果为什么付款方式无效(苹果为什么付款方式被拒怎么解决)

    苹果为什么付款方式无效(苹果为什么付款方式被拒怎么解决)

  • 淘金币有效期(淘金币几天过期)

    淘金币有效期(淘金币几天过期)

  • token的作用(token的用处)

    token的作用(token的用处)

  • 【Visual C++】游戏开发笔记之九  游戏地图制作(一)平面地图贴图(游戏microsoft visual c++ runtime)

    【Visual C++】游戏开发笔记之九 游戏地图制作(一)平面地图贴图(游戏microsoft visual c++ runtime)

  • Fortify安装和使用教程(保姆级)-安装教程(fortify 安装)

    Fortify安装和使用教程(保姆级)-安装教程(fortify 安装)

  • 设计模式---模板方法模式(设计模式模板方法和策略模式对比)

    设计模式---模板方法模式(设计模式模板方法和策略模式对比)

  • 附加税申报免抵税额什么意思
  • 如何查商品税收分类编码
  • 企业减少注册资金需要缴税吗
  • 资产负债表从哪里打出来的
  • 子公司对母公司的责任
  • 视同销售计入销售费用能税前扣除吗
  • 核定征收企业有哪些
  • 土地增值税申报流程
  • 以旧换新如何确认收入
  • 以前年度损益调整科目怎么用
  • 生产车间的房屋要交税吗
  • 销售使用固定资产账务怎么处理
  • 退交税钱
  • 农村合作社开具的专用发票免税吗
  • 增值税专用发票怎么开
  • 所得税汇算清缴补税的会计处理
  • 出口发票开具注意事项及要求有哪些?
  • 建筑业预缴附加税分录
  • 2017年7月后手撕发票还能报销吗?
  • 深圳税种核定需要申报吗
  • 托儿所幼儿园卫生保健工作规范2022
  • 以前年度损益在借方
  • 非流动资产处置净收益是指什么
  • 货物销售价比采购价高
  • 小规模税控盘服务费怎么填增值税申报表
  • 公司账上的钱可以转给法人账上吗
  • 出售交易性金融资产的记账凭证
  • 货物赔偿款会计分录
  • 不超过500万元的固定资产
  • 金蝶存货核算的基本流程
  • win11粘滞键怎么关闭 重启后又有
  • 一般纳税人资质证明文件去哪打印
  • win11安装程序提示非管理员账号
  • 劳务所得税怎么计算公式
  • php导出表格
  • php时间戳转换中国标准时间
  • 递延收益与递延所得税资产的区别
  • vue自定义弹窗带有遮罩层
  • linux中login命令
  • 支付国外佣金需要开票吗
  • 养殖场租赁发票图片
  • 企业财政拨款所得免税吗
  • EOFError:EOF when reading a line
  • mysql unique null
  • 织梦建站详细教程
  • 印花税怎么申报2023
  • 装修工程是可以做什么的
  • 企业需要购买两种保险吗
  • 收到证券公司信息
  • 金税四期对纳税人的影响有哪些
  • 清算中的资产损失
  • 软件公司会计科目
  • 增值税专用发票有几联?
  • 印花税如何计提缴纳
  • 叉车累计折旧如何结转
  • 民办非企业可以开发票吗
  • 投资收益怎么做帐
  • sqlserver中delete、update中使用表别名和oracle的区别
  • mysql用处
  • xp系统开机按什么还原
  • win8如何调整电脑屏幕亮度
  • centos7.6ssh
  • 主板不支持u盘装系统怎么办
  • winxp网络设置在哪
  • linux文本处理实验报告
  • windows media player找不到媒体流
  • mac如何关闭开机密码
  • 两种方法教你锁门
  • ,linux
  • cocos2d-js-min.js
  • jquery提交表单调用serialize方法
  • JavaScript运算符都有哪些
  • js实现计时器在线时间
  • jquery 插件写法
  • 怎样用div css制作网页
  • jqueryw3c
  • 电子税务局官网湖南省
  • 国家税务局何时上班
  • 电子税务局网上登录
  • 河北省电子税务局手机登录入口
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设