AntDesign 長列表的使用

2021-09-25 04:38:48 字數 1232 閱讀 4430

由於資料量比較大,載入時不一次性載入全部資料,而是通過引數page_size載入數量、current_page當前頁兩個引數查詢資料,實現滑動載入

classname=

key=

ref=

datasource=

//資料**

renderfooter=

}>

<

/div>)}

renderrow=

//子元件樣式

renderseparator=

usebodyscroll=

classname=

"container"

style=:}

initiallistsize =

/>

render

let row;if(

this

.state.rowcount >0)

//申請id

states=

//當前訂單狀態

state=

//當前流程狀態

adminname=

//管理員名稱

begintime=

//開始時間

endtime=

//結束時間

/>);

};}

定義查詢方法

//查詢資料

async getborrowdata

(params)

)try)}

//資料總量

let rowcountnum =

this

.state.rowcount + data.datarows.length;

//設定狀態,datasource為antd要求格式

this

.setstate()

}else)}

}catch

(e)}

定義滑動載入

//滑動載入資訊

onendreached =()

=>

; params.page_size =

this

.state.pagesize;

params.current_page =

++pageindex;if(

this

.state.hasmore)

};

優化長列表

最近做的專案有乙個列表模組資料量巨大,後端限制完資料後還有大概10000條資料,直接渲染的話會有明細的卡頓情況,於是擼起袖子開始重構。這裡只回顧一下實現原理以便以後忘了能立馬撿起來 1.儲存原始列表陣列資料 2.只渲染可視區域大小的元素 3.當滾輪滾動時,動態的計算當前的scrolltop的值,然後...

靜態長列表優化

之前在商品模組的時候遇到乙個這樣的問題多個規格組合在一起的時候 規格列表就會很長並且每乙個規格都會有不同的 跟會員價等等資訊,所以會造成每一條商品資料會十分的臃腫再加上多條的話,對於商品規格資料的增刪改查操作的時候頁面會卡頓白屏操作甚至會載入不出來等情況 針對這一反饋我們的長列表優化就來了 思路外層...

vue長列表優化

寫在前面 不知不覺 2020年的日子已經過去了3 4,看到微博熱搜說 2020年還剩下3個月的時候,心情突然驟降 哈哈哈哈 切入正題 什麼是長列表優化?我們為什麼需要長列表優化?我們怎樣進行長列表優化 在我們的日常工作中,會越到各種各樣的列表,比如,我們通常採用分頁的方式進行內容的逐漸獲取,但是不可...