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

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

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

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

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

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

此時(shí)我們需要將listLoading和finished兩個(gè)變量初始化，

這樣便可以解決同時(shí)發(fā)出多個(gè)請(qǐng)求的問題。

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