小程序开发|小程序制作|小程序开发网

搜索

当List数据量过大, app渲染慢导致卡顿问题解决

2023-4-27 16:55| 发布者: 可可西了| 查看: 416| 评论: 0

摘要: 项目中有一个功能中有个几百多条的列表,这个列表总是展示很慢,刚开始我以为是后台返回结果慢,后来测试发现是渲染慢,网上搜索说是v-for渲染的问题,建议加上key属性。但是我加了key属性后并没有解决问题,进一步了

项目中有一个功能中有个几百多条的列表,这个列表总是展示很慢,刚开始我以为是后台返回结果慢,后来测试发现是渲染慢,网上搜索说是v-for渲染的问题,建议加上key属性。但是我加了key属性后并没有解决问题,进一步了解发现key属性只在二次渲染的时候起作用,于是我转念一想我把这100条数据分页加载不就行了,但是由于vue的渲染触发机制,分页加载并没有起作用,于是我进步探究,终于使用延时分页加载解决了这个问题,分享给大家这段代码。

list需要延迟加载的全部listpageSize每次延迟加载的数据条数current初始页默认0delay延迟时间
delayloadDp(list, pageSize, current, delay) {                //延时加载                if (current != 0) {                    current++                }                for (let i = current; i < list.length; i++) {                    this.dataList.push(list[i]);                    current = i                    if (i != 0 && i % pageSize == 0) {                        break                    }                }                if (this.dataList=== list.length) {                    return                }                setTimeout(() => {                    this.delayloadDp(list, pageSize, current, delay)                }, 200 + delay)            },

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部