快捷導(dǎo)航

前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法

更新時間：2023年07月27日 09:09:33 作者：youngOwl

這篇文章主要給大家介紹了關(guān)于前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用select具有一定的參考借鑒價值,需要的朋友可以參考下

問題：

當(dāng)加載上百條、上千條數(shù)據(jù)，導(dǎo)致下拉框數(shù)據(jù)卡頓

解決：

將數(shù)據(jù)分割成更小的單元，每次下拉到底部加載一部分

利用下拉滾動事件

視圖部分：

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

邏輯處理：

//每次滾動觸發(fā)
handldpopupscroll(e){
//向下滾動時，判斷e.target.scrollHeight(實際下拉列表高度)-e.target.clientHeight（可視框高度)==e.target.scrollTop（卷起的高度）
if(e.target.scrollHeight-e.target.clientHeight==e.target.scrollTop){
//(指向下一個分組數(shù)據(jù))
this.scrollPage++
//第一個位置=當(dāng)前分組數(shù)據(jù)*每組數(shù)據(jù)的數(shù)量
let beforts=this.scrollNumber*(this.scrollPage-1)
//第二個位置=下一個分組指向*每組數(shù)據(jù)的數(shù)量-1
let afters=this.scrollNumber*this.scrollPage-1
展示數(shù)組=原數(shù)組.slice(第一個位置，第二個位置)
//(使滑塊位置不置于最上面，才能向上滑動)
e.target.scrollTop=5
//為了防止滑塊滑動太快將以上加在延時器里面,不然數(shù)據(jù)會跳
}
//向上滾動時，判斷e.target.scrollTop（卷起的高度小于1）和this.scroPage指向下一個分組數(shù)據(jù)的角標(biāo)大于1
if(target.scrollTop<1&&this.scroPage>1){
//(指向上一個分組數(shù)據(jù))
this.scrollPage--
//第一個位置=當(dāng)前分組數(shù)據(jù)*每組數(shù)據(jù)的數(shù)量
let beforts=this.scrollNumber*(this.scrollPage-1)
//第二個位置=下一個分組指向*每組數(shù)據(jù)的數(shù)量-1
let afters=this.scrollNumber*this.scrollPage-1
展示數(shù)組=原數(shù)組.slice(第一個位置，第二個位置)
//判斷是否是第一組數(shù)據(jù)
if(this.scrollPage!=1){
//(使滑塊位置不置于最上面，才能向上滑動)
e.target.scrollTop=5
}
//為了防止滑塊滑動太快將以上加在延時器里面,不然數(shù)據(jù)會跳
}
}

總結(jié)

到此這篇關(guān)于前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法的文章就介紹到這了,更多相關(guān)vue select下拉數(shù)據(jù)量過大卡頓內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！