亚洲av无码乱码国产一区二区,午夜理论片yy44880影院,午夜久久久久久禁播电影,熟睡人妻被讨厌的公侵犯

12
2023/08

vantUI中瀑布流滾動加載的使用以及請求異常問題的解決

發(fā)布時間:2023-08-12 18:47:28
發(fā)布者:MaiMai
瀏覽量:
0

VantUI中的van-list,即瀑布流滾動加載,用于展示長列表,當(dāng)列表即將滾動到底部時,會觸發(fā)事件并加載更多列表項。

官網(wǎng)給出的示例如圖所示:

官網(wǎng)示例

首先設(shè)置listLoading和finished兩個變量,listLoading控制列表數(shù)據(jù)的加載狀態(tài),finished為是否已加載完成,加載完成后不再觸發(fā)load事件。

DOM結(jié)構(gòu)

@load="onLoadList"綁定了一個加載事件,當(dāng)滾動條與底部距離小于 offset 時觸發(fā)。

在onLoadList方法中請求后臺數(shù)據(jù),由于當(dāng)組件滾動到底部時,會觸發(fā) load 事件并將 loading 設(shè)置成 true,只需要獲取成功后修改listLoading與finished的值即可,如圖所示:

執(zhí)行方法

執(zhí)行方法

但是執(zhí)行時,卻會發(fā)生請求異常問題,onload事件不斷觸發(fā),數(shù)據(jù)會不停的請求并加載。

此時我們需要將listLoading和finished兩個變量初始化,

變量初始化

執(zhí)行方法

這樣便可以解決同時發(fā)出多個請求的問題。

若修改之后問題還沒有解決,可能是因為一次請求加載的數(shù)據(jù)條數(shù)較少,導(dǎo)致列表內(nèi)容無法鋪滿當(dāng)前屏幕,List 會繼續(xù)觸發(fā) load 事件,直到內(nèi)容鋪滿屏幕或數(shù)據(jù)全部加載完成。解決方法就是將offset值設(shè)置的高一點(默認(rèn)是300)。


關(guān)鍵詞:
返回列表