前端vue框架select下拉数据量过大造成卡顿问题解决办法
作者：youngOwl
这篇文章主要给大家介绍了关于前端vue框架select下拉数据量过大造成卡顿问题解决办法,文中通过示例代码介绍的非常详细,对大家学习或者使用select具有一定的参考借鉴价值,需要的朋友可以参考下
问题：
当加载上百条、上千条数据，导致下拉框数据卡顿
解决：
将数据分割成更小的单元，每次下拉到底部加载一部分
利用下拉滚动事件
视图部分：
<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
}
//为了防止滑块滑动太快将以上加在延时器里面,不然数据会跳
}
}总结
到此这篇关于前端vue框架select下拉数据量过大造成卡顿问题解决办法的文章就介绍到这了,更多相关vue select下拉数据量过大卡顿内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！