vue之vant組件下拉加載更多

vant地址：https://youzan.github.io/vant/#/zh-CN/intro

基礎用法

List 組件通過loading和finished兩個變量控制加載狀態，當組件滾動到底部時，會觸發load事件並將loading設置成true。此時可以發起異步操作並更新數據，數據更新完畢后，將loading設置成false即可。若數據已全部加載完畢，則直接將finished設置成true即可。

<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,
      finished: false,
　　　 loadTag:1 //標記是否觸發onLoad函數
    };
  },

  methods: {
    onLoad() {
　　　　
      if(loadTag==1){
　　　　　　//請求接口得到數據給list數組
　　　　　　this.list=數據；
　　　　　　app.loadTag=0;
　　　　　　//在請求成功函數中讓 app.loadTag=1；
　　　　}　　　　
      setTimeout(() => {
        
        // 加載狀態結束
        this.loading = false;

        // 數據全部加載完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    }
  }
}

　　

　

API

Props

參數	說明	類型	默認值	版本
v-model	是否處於加載狀態，加載過程中不觸發load事件	boolean	false	-
finished	是否已加載完成，加載完成后不再觸發load事件	boolean	false	-
error	是否加載失敗，加載失敗后點擊錯誤提示可以重新 觸發load事件，必須使用sync修飾符	boolean	false	-
offset	滾動條與底部距離小於 offset 時觸發load事件	number	300	-
loading-text	加載過程中的提示文案	string	加載中...	-
finished-text	加載完成后的提示文案	string	-	-
error-text	加載失敗后的提示文案	string	-	-
immediate-check	是否在初始化時立即執行滾動位置檢查	boolean	true	-
direction	滾動觸發加載的方向，可選值為up	string	down	-

Events

事件名	說明	回調參數
load	滾動條與底部距離小於 offset 時觸發	-

方法

通過 ref 可以獲取到 list 實例並調用實例方法

方法名	說明	參數	返回值
check	檢查當前的滾動位置，若已滾動至底部，則會觸發 load 事件	-	-

Slots

名稱	說明
default	列表內容
loading	自定義底部加載中提示