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

  • 徕卡r502评价(徕卡r50)(徕卡r50f2)

    徕卡r502评价(徕卡r50)(徕卡r50f2)

  • 小米10青春版有指纹解锁功能吗(小米10青春版有OTG功能吗)

    小米10青春版有指纹解锁功能吗(小米10青春版有OTG功能吗)

  • 直播间抢不到货是什么原因(直播间抢不到货有什么技巧)

    直播间抢不到货是什么原因(直播间抢不到货有什么技巧)

  • 在excel中在单元格中输入3/5的方法(在excel中在单元格中输入=12>24)

    在excel中在单元格中输入3/5的方法(在excel中在单元格中输入=12>24)

  • 美团顺风车开通城市(美团顺风车司机注册)

    美团顺风车开通城市(美团顺风车司机注册)

  • 苹果转接头连接声卡没伴奏(苹果转接头连接音响可以不连蓝)

    苹果转接头连接声卡没伴奏(苹果转接头连接音响可以不连蓝)

  • 微机的字长是四个字节这意味着(微机的字长是四个自己这意味着)

    微机的字长是四个字节这意味着(微机的字长是四个自己这意味着)

  • 嘀嗒出行打不开(嘀嗒出行打不到车怎么办)

    嘀嗒出行打不开(嘀嗒出行打不到车怎么办)

  • 华为快速充电功能没了(华为快速充电功率查询)

    华为快速充电功能没了(华为快速充电功率查询)

  • xsmax无线充电多少w(xsmax无线充电多少)

    xsmax无线充电多少w(xsmax无线充电多少)

  • 显卡驱动和图形驱动有什么区别(显卡驱动和图形驱动怎么选)

    显卡驱动和图形驱动有什么区别(显卡驱动和图形驱动怎么选)

  • 为什么手机取卡的地方不弹出来(为什么手机取卡的地方拔不出来)

    为什么手机取卡的地方不弹出来(为什么手机取卡的地方拔不出来)

  • cc2530是什么芯片(芯片cc2530是由( )公司开发的)

    cc2530是什么芯片(芯片cc2530是由( )公司开发的)

  • iphone7机身长度多少cm(iphone7机身长度多少厘米)

    iphone7机身长度多少cm(iphone7机身长度多少厘米)

  • 手机充电一直显示1%(手机充电一直显示0%咋弄?)

    手机充电一直显示1%(手机充电一直显示0%咋弄?)

  • iphone11支持扩容吗(苹果11能扩容)

    iphone11支持扩容吗(苹果11能扩容)

  • 小米9pro什么时候发布(小米9pro什么时候上市)

    小米9pro什么时候发布(小米9pro什么时候上市)

  • 手机突然4g网络变成2g(手机4g网络突然用不了怎么回事)

    手机突然4g网络变成2g(手机4g网络突然用不了怎么回事)

  • 联发科p22相当于骁龙什么处理器(联发科p22相当于苹果多少)

    联发科p22相当于骁龙什么处理器(联发科p22相当于苹果多少)

  • 共享充电宝怎么退押金(共享充电宝怎么归还,直接放进去就可以了吗)

    共享充电宝怎么退押金(共享充电宝怎么归还,直接放进去就可以了吗)

  • 怎么按顺序排列文件(word里添加图片怎么按顺序排列)

    怎么按顺序排列文件(word里添加图片怎么按顺序排列)

  • 好友点赞为什么不显示(好友点赞为什么看不到)

    好友点赞为什么不显示(好友点赞为什么看不到)

  • 图像处理要学什么(图像处理要学什么课程)

    图像处理要学什么(图像处理要学什么课程)

  • windows是什么(windows是什么公司)

    windows是什么(windows是什么公司)

  • 什么是文件扩展名?Win10如何修改文件扩展名?(什么是文件扩展名dws)

    什么是文件扩展名?Win10如何修改文件扩展名?(什么是文件扩展名dws)

  • pwdhash命令  密码哈希生成器(passwd -s命令)

    pwdhash命令 密码哈希生成器(passwd -s命令)

  • 2023 年8个ChatGPT 的替代品(2023年会出什么车)

    2023 年8个ChatGPT 的替代品(2023年会出什么车)

  • vmstat命令  监视系统资源状态

    vmstat命令 监视系统资源状态

  • 缴纳当月的增值税
  • 企业利润对外投资 所得税
  • 什么是国税发票号码
  • 发票该如何打印
  • 公司往来借款在现金流量表哪里填写
  • 已经抵扣过的进项票对方红冲之后怎么做账报税
  • 财务会计制度备案表
  • 什么情况下要安起搏器
  • 车辆挂靠收取管理费怎么做账
  • 土地罚款可以计入成本吗?
  • 独生子女保健费发到孩子多大年纪
  • 小规模纳税人的题目
  • 三证合一后还要去税务局吗
  • 小规模专票丢了怎么办
  • 建安行业核定征收企业所得税
  • 金税盘用途
  • 营改增后房屋出租税率
  • 对公账户上扣缴的税怎么做分录?
  • 收到境外公司服务费
  • 免税农产品发票可以抵扣么
  • 一次性领取的年金 税率表
  • 广告业文化事业建设费2023标准
  • 鸿蒙系统开发者选项怎么关闭
  • 利润总额和净利润的区别
  • 劳务费没发票怎样下账
  • php创建二维数组
  • 为什么浏览器自动打开
  • wordpress访客插件
  • 销售返利应该怎么做账
  • 厂房修缮
  • 在途物资和材料采购属于存货吗
  • 销售已使用固定资产收入与主营收入合计超过120万元
  • 增值税发票销货清单怎么打印
  • 个体工商户税收标准2023年
  • php中pdo
  • 十天学会css教程
  • 装系统如何不安装自带软件
  • 利用python
  • 手工凭证三级明细
  • 企业所得税报表模板
  • 交易性金融资产的账务处理
  • 酒店电费 水费需要另外算吗
  • 出纳把现金存入私人账户后转公账
  • mysql需要转义的特殊字符
  • sql server数据表
  • SQL2005中char nchar varchar nvarchar数据类型的区别和使用环境讲解
  • 服务器连接db2数据库命令
  • 用于员工福利的专票可以抵扣吗
  • 小规模纳税人收入会计分录
  • 企业其他应付款减少说明什么
  • 库存商品过期变成废品
  • 小规模纳税人所得税怎么计算
  • 原材料用于在建工程
  • 企业给员工单独交社保
  • 其他应付款是什么科目代码
  • 会计核算健全的单位 可以选择小规模纳税的有
  • 收到存款利息收入用什么凭证
  • 银行存款明细账借方代表什么
  • 利润表的编制方法和步骤实操
  • 工资的计算方法有几种
  • Linux系统下mysqlcheck修复数据库命令(详解)
  • win10系统的邮件和日历跟outlook一样嘛
  • 如何修改centos7的workspace name
  • win8.1系统安装教程
  • win8 chkdsk
  • winxp/win7/win2003 电脑开机密码设置图文方法
  • nfs网络安装
  • linux中怎么在文件中添加内容
  • Linux下使用httpry来嗅探HTTP流量教程
  • android app架构设计
  • opengl 投影矩阵
  • 比较好的jquery教程
  • linux find命令的使用
  • python能爬取app吗
  • listview.items.add
  • linux显示中文
  • 税务局开展活动
  • 车船税每年都是300怎么变成600
  • 江苏税务缴费小程序
  • 统一社会信用代码证
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设