前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法
問題:
當加載上百條、上千條數(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++
//第一個位置=當前分組數(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ù)的角標大于1
if(target.scrollTop<1&&this.scroPage>1){
//(指向上一個分組數(shù)據(jù))
this.scrollPage--
//第一個位置=當前分組數(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3性能優(yōu)化的5個隱藏技巧總結(jié)大全(第4個連老手都未必知道)
Vue.js的性能優(yōu)化涉及多個方面,包括編碼優(yōu)化、源碼優(yōu)化、打包優(yōu)化以及使用工具進行性能分析等,這篇文章主要介紹了Vue3性能優(yōu)化的5個隱藏技巧的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-05-05
vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)
本文主要介紹了vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
關(guān)于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue中使用element ui的彈窗與echarts之間的問題詳解
這篇文章主要介紹了vue中使用element ui的彈窗與echarts之間的問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
淺談vue自定義全局組件并通過全局方法 Vue.use() 使用該組件
本篇文章主要介紹了vue自定義全局組件并通過全局方法 Vue.use() 使用該組件,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12
vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項目方式
這篇文章主要介紹了vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項目方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04
vue3中watch監(jiān)聽不同數(shù)據(jù)源的方法總結(jié)
這篇文章主要為大家詳細介紹了vue3中watch監(jiān)聽不同數(shù)據(jù)源的常用方法,文中的示例代碼講解詳細,具有一定的借鑒價值,大家可以根據(jù)自己的需要進行選擇2026-03-03

