位置: IT常识 - 正文

uniapp/vue虚拟列表,数据列表渲染优化(uniapp vuecli)

编辑:rootadmin
uniapp/vue虚拟列表,数据列表渲染优化 引言

推荐整理分享uniapp/vue虚拟列表,数据列表渲染优化(uniapp vuecli),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuetify uniapp,uniapp 使用vuex,uniapp 虚拟列表,vue虚拟列表,vue虚拟列表,uni 虚拟列表,uni 虚拟列表,vue虚拟列表,内容如对您有帮助,希望把文章链接给更多的朋友!

相信大家经常会遇到展示一堆数据的需求,几十条数据还好,要是几百上千条,甚至带上了图片。那就会卡得不行。这时候就需要按需加载。

按需加载有懒加载和虚拟列表。

懒加载:通过JS滚动或触底触发事件来加载更多的数据,类似分页。虚拟列表:只加载可视区域的数据,通过计算长度区间反推需要加载的数据来实现假滑动。

二者异同

很明显,懒加载虽然也有优化,可是当用户疯狂下拉刷新时候最后还是会卡,虽然很难有那种场景。懒加载的好处就是,用户往回刷时候因为加载过,所以看上面的内容会比较顺滑。

而虚拟列表则是只加载可视范围的数据,需要精确计算,若不精确计算也可,但是有些数据会只显示了一部分(这个就需要个人自己优化一下计算的算法了,符合需求就可),而且因为是假滑动,所以观感有可能没有懒加载这么好。

uniapp/vue虚拟列表,数据列表渲染优化(uniapp vuecli)

两者在数据请求时,可以一次性拿完,也可分次拿取,懒加载便是下滑加载或触底时候请求新数据加到旧数据里。但虚拟列表拿的时候需要参考懒加载,因为用户也有往上滑的需求,这算法你们不想累死自己和后端吧。

接下来用Uniapp来演示,原生vue也可参考使用(更方便),理论上是一样的,区别就在于uniapp做微信小程序时候没有document可供使用(除非使用dhtml-weixin等插件),非H5端在某些组件上不能使用ref获取实例(如view),如此一来操作dom,只能通过官方提供的uni.createSelectorQuery()接口。

原理

 如图,黑框是数据列表的总高度,红框是你设定的可视范围,与动图里不同的是,红框内的数据是实时生成的(并不是通过隐藏其他数据),并且因为偏移量采用了取余操作(如果有需要可以自己定制),保证了在红框内第一条数据永远是完整展示的。只是因为滑动时未停下,js未响应前,新的列表不会生成,就会有一个假滑动的效果。

代码<template><scroll-view class="container" scroll-y="true" @scroll="scroll" ><!-- 虚拟列表总高度 --><view :style="{'height': `${totalHeight}rpx`, 'position': 'relative'}"><!-- 可视渲染区 --><view :style="{'top': `${top}px`}" style="width: 100%;position:absolute"> <!--在这里自定义你数据的展示结构和样式,itemHeight为这里的总高度--><view v-for="(item,index) in showList" :key="index" class="item"><span>我是第{{item.index}}条数据</span></view></view></view></scroll-view></template><script>export default {data(){return{allList:[],//原始数据列表//虚拟列表showList: [], //可视区域显示的数据itemHeight: 100,//每条数据所占高度showNum: 0, //可视区域显示的最大条数top: 0, //偏移量scrollTop: 0, //卷起的高度startIndex: 0, //可视区域第一条数据的索引endIndex: 0, //可视区域最后一条数据的索引+1,}},onLoad() { //获取数据列表for(let i=0;i<100;i++){this.allList.push({'index':i})}// console.log(this.allList)},onShow() { //第一次时调用一下,且uni.createSelectorQuery()需要在生命周期mounted之后使用this.scroll()},computed: {totalHeight() {return this.allList.length*this.itemHeight*2//因为rpx和px的关系}},methods:{//虚拟列表getShowList(){ //可视区域能出现的数据条数this.showNum = Math.ceil(this.contentHeight/this.itemHeight); // console.log('可视数量',this.showNum) //可视区域第一条数据的索引this.startIndex = Math.floor(this.scrollTop/this.itemHeight); // console.log('初始索引',this.startIndex) //可视区域最后一条数据的下一条数据this.endIndex = this.startIndex + this.showNum; //可视区数据,会比实际可视多渲染一条 this.showList = this.allList.slice(this.startIndex, this.endIndex) // console.log(this.showList) //保证滑动时第一条数据完整展示let offsetY = this.scrollTop - (this.scrollTop % this.itemHeight); this.top = offsetY;},scroll(){// 利用uniapp提供的接口获取可视区域的高度和滚动高度let query=uni.createSelectorQuery()let container=query.select('.container');container.fields({// rect:true, //是否返回节点布局位置信息{left,top,right,bottom}size:true, //是否返回节点尺寸信息{width,height}scrollOffset:true //是否返回节点滚动信息{scrollLeft,scrollTop}},(res)=>{console.log(res)this.scrollTop=res.scrollTopthis.contentHeight=res.heightthis.getShowList();//因为所在函数是异步}).exec()},}}</script><style>.container{width: 100%;height: 100vh; /*原生一定得有这个overflow的hidden效果,此处用了scroll-view所以不需要*//*overflow:auto;*/}.item{/* 按照实际需求写css */width: 100%;height: 200rpx;/* 要对应上itemHeight */border: 1rpx solid slateblue;}</style>注意点

1、uniapp里需要使用scroll-view才能实现隐藏滑动效果。原生的看代码里一样加上overflow:auto即可滑动,原生把所有view结构换成div。

2、uni.createSelectorQuery()的那个获取信息成功后执行的函数是异步执行的,所以需要留意一下你的同步操作,比如this.getShowList()不要放在外面。

3、可惜的是,不知道是不是v-for里的.item的问题,uni.createSelectorQuery()死活都拿不到节点,否则可以动态拿到每个数据节点的实际总高度。(注意这里不适用每条数据高度都不一样的情况,如需要高度不一样,请自行调整,如把itemHeight单独放在list的对象内之类,或通过改变现有结构统一固定每条数据的高度)

所以我这里uniapp是写死了itemHeigh,itemHeigh(px单位制)和下面css样式里的height需要对应上,你也可以看到我computed里让itemHeigh乘了2,(因为大多数设备的rpx和px的css像素比例都是2:1)其实对应不上,效果还是会有的,所以不用特别纠结代码里的rpx和px单位。只要渲染的列表数据长度大于可视区域的列表数据长度即可。

先写到这了,有想起来或者出错再补充修改,如果你有更好的建议或纠错,欢迎评论,多多点赞谢谢。

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

上一篇:windows7安装node14版本及以上(windows7安装nodejs14)

下一篇:H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信(支持h5浏览器)

  • 如何在黑屏状态下唤醒小布(如何在黑屏状态下唤醒小爱同学)

    如何在黑屏状态下唤醒小布(如何在黑屏状态下唤醒小爱同学)

  • 荣耀30pro+如何分屏(荣耀30Pro如何分屏)

    荣耀30pro+如何分屏(荣耀30Pro如何分屏)

  • 知乎收藏别人能看见吗(知乎看别人的收藏夹会被发现吗)

    知乎收藏别人能看见吗(知乎看别人的收藏夹会被发现吗)

  • 移动定制版手机能改全网通吗(移动定制版手机和全网通的区别)

    移动定制版手机能改全网通吗(移动定制版手机和全网通的区别)

  • flash可以导入图片吗(flash导入图片怎么对图片进行操作)

    flash可以导入图片吗(flash导入图片怎么对图片进行操作)

  • 华为笔记本保修多久(华为笔记本保修两年吗)

    华为笔记本保修多久(华为笔记本保修两年吗)

  • 域名服务系统的功能(域名服务系统的主要功能)

    域名服务系统的功能(域名服务系统的主要功能)

  • 苹果11屏幕自动变暗(苹果11屏幕自动亮怎么关闭)

    苹果11屏幕自动变暗(苹果11屏幕自动亮怎么关闭)

  • 苹果手机拍照没有视频选项(苹果手机拍照没有视频清晰)

    苹果手机拍照没有视频选项(苹果手机拍照没有视频清晰)

  • 华为畅享10plus电池不耐用(华为畅享10plus电话卡怎么插)

    华为畅享10plus电池不耐用(华为畅享10plus电话卡怎么插)

  • ipadmini4有指纹识别吗(ipadmini4有没有指纹解锁)

    ipadmini4有指纹识别吗(ipadmini4有没有指纹解锁)

  • siri自动弹出怎么回事(siri老是自己跳出来是什么意思)

    siri自动弹出怎么回事(siri老是自己跳出来是什么意思)

  • airpods pro如何调节音量(airpods pro如何调节降噪)

    airpods pro如何调节音量(airpods pro如何调节降噪)

  • 苹果美版和国行有什么区别在哪里(苹果美版和国行哪个值得买)

    苹果美版和国行有什么区别在哪里(苹果美版和国行哪个值得买)

  • 个人热点怎样拉出黑名单(个人热点怎样拉黑对方)

    个人热点怎样拉出黑名单(个人热点怎样拉黑对方)

  • 华硕飞行堡垒7代和6代有什么区别(华硕飞行堡垒7配置)

    华硕飞行堡垒7代和6代有什么区别(华硕飞行堡垒7配置)

  • 手机淘宝币怎么用(淘宝币怎么提现)

    手机淘宝币怎么用(淘宝币怎么提现)

  • 微信红旗头像怎么弄(微信红旗头像怎么搞)

    微信红旗头像怎么弄(微信红旗头像怎么搞)

  • 手机怎么清理垃圾(手机怎么清垃圾)

    手机怎么清理垃圾(手机怎么清垃圾)

  • x27vivo摄像头如何升降(vivo x27摄像头)

    x27vivo摄像头如何升降(vivo x27摄像头)

  • 怎么查pos机是否跳码(怎么查pos机是否停用了)

    怎么查pos机是否跳码(怎么查pos机是否停用了)

  • 为什么截屏图片模糊(为什么截屏图片看不到)

    为什么截屏图片模糊(为什么截屏图片看不到)

  • 手机听不到对方说话怎么回事(手机听不到对方说话)

    手机听不到对方说话怎么回事(手机听不到对方说话)

  • 如何删除金山文档小程序(如何删除金山文档中的文件QQ)

    如何删除金山文档小程序(如何删除金山文档中的文件QQ)

  • 华硕电脑关不了机(华硕电脑关不了机只有一个鼠标可以动怎么办)

    华硕电脑关不了机(华硕电脑关不了机只有一个鼠标可以动怎么办)

  • 半月湾南瓜地鸟瞰图,加利福尼亚 (© Tinker Street/Michael O'Neal/Gallery Stock)(半月湾在哪)

    半月湾南瓜地鸟瞰图,加利福尼亚 (© Tinker Street/Michael O'Neal/Gallery Stock)(半月湾在哪)

  • css宽高自适应(css 宽度 自适应 占满)

    css宽高自适应(css 宽度 自适应 占满)

  • 三证合一后纳税人识别号和信用代码一样吗
  • 汇算清缴时纳税调整表调增金额是怎么算出来的
  • 税法的分类都有什么
  • 税金及附加借贷科目
  • 股份有限公司董事会决议必须经过
  • 代扣代缴附加税减免
  • 非限定性净资产包括哪些科目
  • 营业成本包括期初存货成本和期末存货成本
  • 个人独资企业没有申报税的后果
  • 债务重组偿债顺序
  • 员工一次性伤残补助金
  • 石油天然气管道保护法
  • 个体户季度报税表怎么填
  • 如果当月有未记账的凭证,系统不可以结账
  • 年终奖金在年度内扣税吗
  • 什么情况下需要写答
  • 欠税已经缴纳会影响征信吗
  • 项目部临时设施平面图
  • 资源税改革对政治的影响
  • 税务代理有哪些岗位
  • 居民企业清算企业所得税
  • 专门从事股权投资的合伙企业投资收益 个人所得税
  • 房地产记账凭证
  • 微信认证服务费可以开发票吗
  • 小企业财务报表不包括
  • 民间非营利组织会计科目
  • 高新技术企业取消认定
  • 增值税发票过期未抵扣怎么办
  • 收到电子银行承兑汇票怎么做账务处理
  • 在公司预支费用怎么写单据
  • 新公司开办费用包括哪些
  • 租金收入缴纳个税
  • koeids.dll
  • linux基本命令有哪些
  • 新购固定资产账务处理
  • php中正则表达式
  • 房产税和土地使用税什么时候申报
  • 模型训练的过程是什么过程
  • vue实现简易购物车
  • vue脚手架配合springsecurity
  • init 6命令
  • 工会经费计提的会计分录
  • 申报缴纳上月税费的会计分录
  • 信用减值损失和公允价值变动的区别
  • 新老税法
  • 进项税销项税抵扣分录
  • 企业取得财产转让收入
  • 采购固定资产怎么做账
  • 小规模纳税人销售自己使用过的物品
  • 主营业务成本工资写什么部门
  • 固定资产清理在贷方怎么结转
  • 投资性房地产与持有待售资产的区别
  • 个税多缴了纳税人怎么办
  • 利润表的营业成本包括管理费用吗
  • 什么叫建账
  • 记账凭证的填制与审核
  • mysqld关闭
  • 主板如何清除cmos
  • ubuntu的安装步骤
  • iis安装失败找不到源文件
  • linux中的rpm什么意思
  • win10按prtsc没反应
  • Android游戏开发教程
  • 滑动到点击位置的快捷键
  • django pypi
  • etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
  • node.js网站
  • linux ls-l命令
  • 批处理rd
  • python不能用
  • python 异常捕获
  • 天气球球下载
  • js中的tostring方法
  • 判断jquery对象是否存在
  • 印花税没有做税种认定怎么办
  • 发票单位可以开一批吗?
  • 芜湖买房退契税在哪里退
  • 郑州房管局办事大厅预约
  • 个体工商户将自有车辆出租取得的收入怎么征税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设