前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法
更新時間:2023年07月27日 09:09:33 作者:youngOwl
這篇文章主要給大家介紹了關于前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用select具有一定的參考借鑒價值,需要的朋友可以參考下
問題:
當加載上百條、上千條數(shù)據(jù),導致下拉框數(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ù)會跳
}
}總結
到此這篇關于前端vue框架select下拉數(shù)據(jù)量過大造成卡頓問題解決辦法的文章就介紹到這了,更多相關vue select下拉數(shù)據(jù)量過大卡頓內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue-extend和vue-component注冊一個全局組件方式
這篇文章主要介紹了vue-extend和vue-component注冊一個全局組件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
本文詳細介紹了Vue3中的`onMounted`鉤子函數(shù)的前世今生,包括其在Vue2中的前身`mounted`鉤子,以及Vue3中使用Composition?API的`onMounted`鉤子的用法,文章涵蓋了`onMounted`的多種用法,感興趣的朋友跟隨小編一起看看吧2024-11-11
vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置
configureWebpack和chainWebpack都是Vue CLI中用于修改Webpack配置的工具,configureWebpack可以通過對象或函數(shù)修改配置,簡單直接;chainWebpack則使用WebpackChainAPI,適合復雜配置,兩者可以結合使用,以達到更精細的配置需求,幫助開發(fā)者優(yōu)化項目構建2024-10-10

