解决前端vue框架select下拉数据量过大造成卡顿问题

youngOwl

已于 2024-04-09 10:35:01 修改

阅读量3.3k

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-05-09 16:06:29 首次发布

本文链接：https://blog.csdn.net/youngOwl/article/details/130580798

版权

文章介绍了在遇到下拉选择框加载大量数据时出现卡顿的情况，提出的解决方案是通过监听滚动事件，将数据分页加载。当用户滚动到列表底部时，加载下一组数据，而不是一次性加载所有数据。同时，对于向上滚动，也有相应的处理逻辑，确保平滑的用户体验。

摘要由CSDN通过智能技术生成

问题：当加载上百条、上千条数据，导致下拉框数据卡顿

解决：将数据分割成更小的单元，每次下拉到底部加载一部分

利用下拉滚动事件

视图部分：

<a-select label-in-value :default-value="{ key: 'lucy' }" style="width: 120px" @change="handleChange" @popupScroll="handldpopupscroll" ><a-select-option></a-select-option></a-select>

逻辑处理：

//每次滚动触发

handldpopupscroll(e){

//向下滚动时，判断e.target.scrollHeight(实际下拉列表高度)-e.target.clientHeight（可视框高度)==e.target.scrollTop（卷起的高度）

if(e.target.scrollHeight-e.target.clientHeight==e.target.scrollTop){

//(指向下一个分组数据)
this.scrollPage++

//第一个位置=当前分组数据*每组数据的数量
let beforts=this.scrollNumber*(this.scrollPage-1)

//第二个位置=下一个分组指向*每组数据的数量-1
let afters=this.scrollNumber*this.scrollPage-1

展示数组=原数组.slice(第一个位置，第二个位置)

//(使滑块位置不置于最上面，才能向上滑动)
e.target.scrollTop=5

//为了防止滑块滑动太快将以上加在延时器里面,不然数据会跳

}

//向上滚动时，判断e.target.scrollTop（卷起的高度小于1）和this.scroPage指向下一个分组数据的角标大于1
if(target.scrollTop<1&&this.scroPage>1){

//(指向上一个分组数据)
this.scrollPage--

//第一个位置=当前分组数据*每组数据的数量
let beforts=this.scrollNumber*(this.scrollPage-1)

//第二个位置=下一个分组指向*每组数据的数量-1
let afters=this.scrollNumber*this.scrollPage-1

展示数组=原数组.slice(第一个位置，第二个位置)

//判断是否是第一组数据
if(this.scrollPage!=1){
//(使滑块位置不置于最上面，才能向上滑动)
e.target.scrollTop=5
}

//为了防止滑块滑动太快将以上加在延时器里面,不然数据会跳

}



}