[list](https://youzan.github.io/vant/#/zh-CN/list) Tip:進入頁面之后onLoad函數會自動觸發,也就是它會觸發兩次 * 第一次進入頁面的時候觸發 * 第二次頁面到達底部的時候觸發 等于集成了小程序中,onLoad和onReachBottom函數,所以直接將[進入頁面的網絡請求](http://www.chengbenchao.top/vuexx/901041)和[上拉刷新](http://www.chengbenchao.top/vuexx/901041)的網絡請求,都要寫在`List的onLoad中` ## [示例代碼](https://gitee.com/html5_of_the_buddha_department/vue-demo/tree/master/01vant-list%E4%B8%8A%E6%8B%89%E5%88%B7%E6%96%B0) ~~~ //要實現上拉刷新的html放在van-list中 <van-list v-model="loading" :finished="finished" finished-text="沒有更多了" @load="onLoad" > //使用的組件，循環渲染出的頁面 <van-cell v-for="item in list" :key="item" :title="item" /> </van-list> ~~~ ~~~ export default { data() { return { list: [], loading: false, //數據全部加載出來之后將其改為true finished: false }; }, methods: { onLoad() { // 異步更新數據 setTimeout(() => { for (let i = 0; i < 10; i++) { this.list.push(this.list.length + 1); } // 加載狀態結束，不改為false到達底部時就不會觸發onload函數 this.loading = false; // 數據全部加載完成通過條件判斷是否全部加載完畢接口中一般有總條數，將總數設置在data中 if (this.list.length >= 40) { //顯示已加載完成 this.finished = true; } }, 500); } } } ~~~