Vant List 列表

2022-05-31 13:35 更新

介紹

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

引入

import Vue from 'vue';
import { List } from 'vant';

Vue.use(List);

代碼演示

基礎(chǔ)用法

List 組件通過loading和finished兩個變量控制加載狀態(tài),當(dāng)組件滾動到底部時,會觸發(fā)load事件并將loading設(shè)置成true。此時可以發(fā)起異步操作并更新數(shù)據(jù),數(shù)據(jù)更新完畢后,將loading設(shè)置成false即可。若數(shù)據(jù)已全部加載完畢,則直接將finished設(shè)置成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
    };
  },
  methods: {
    onLoad() {
      // 異步更新數(shù)據(jù)
      // setTimeout 僅做示例,真實場景中一般為 ajax 請求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加載狀態(tài)結(jié)束
        this.loading = false;

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

錯誤提示

若列表數(shù)據(jù)加載失敗,將error設(shè)置成true即可顯示錯誤提示,用戶點擊錯誤提示后會重新觸發(fā) load 事件。

<van-list
  v-model="loading"
  :error.sync="error"
  error-text="請求失敗,點擊重新加載"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
export default {
  data() {
    return {
      list: [],
      error: false,
      loading: false
    };
  },
  methods: {
    onLoad() {
      fetchSomeThing().catch(() => {
        this.error = true;
      })
    }
  }
}

下拉刷新

List 組件可以與 PullRefresh 組件結(jié)合使用,實現(xiàn)下拉刷新的效果

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="沒有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</van-pull-refresh>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表數(shù)據(jù)
      this.finished = false;

      // 重新加載數(shù)據(jù)
      // 將 loading 設(shè)置為 true,表示處于加載狀態(tài)
      this.loading = true;
      this.onLoad();
    }
  }
}

API

Props

參數(shù)說明類型默認(rèn)值
v-model是否處于加載狀態(tài),加載過程中不觸發(fā)load事件booleanfalse
finished是否已加載完成,加載完成后不再觸發(fā)load事件booleanfalse
error是否加載失敗,加載失敗后點擊錯誤提示可以重新
觸發(fā)load事件,必須使用sync修飾符
booleanfalse
offset滾動條與底部距離小于 offset 時觸發(fā)load事件number | string300
loading-text加載過程中的提示文案string加載中...
finished-text加載完成后的提示文案string-
error-text加載失敗后的提示文案string-
immediate-check是否在初始化時立即執(zhí)行滾動位置檢查booleantrue
direction滾動觸發(fā)加載的方向,可選值為upstringdown

Events

事件名說明回調(diào)參數(shù)
load滾動條與底部距離小于 offset 時觸發(fā)-

方法

通過 ref 可以獲取到 List 實例并調(diào)用實例方法,詳見 組件實例方法

方法名說明參數(shù)返回值
check檢查當(dāng)前的滾動位置,若已滾動至底部,則會觸發(fā) load 事件--

Slots

名稱說明
default列表內(nèi)容
loading自定義底部加載中提示
finished自定義加載完成后的提示文案
error自定義加載失敗后的提示文案

常見問題

List 的運(yùn)行機(jī)制是什么?

List 會監(jiān)聽瀏覽器的滾動事件并計算列表的位置,當(dāng)列表底部與可視區(qū)域的距離小于offset時,List 會觸發(fā)一次 load 事件。

為什么 List 初始化后會立即觸發(fā) load 事件?

List 初始化后會觸發(fā)一次 load 事件,用于加載第一屏的數(shù)據(jù),這個特性可以通過immediate-check屬性關(guān)閉。

為什么會連續(xù)觸發(fā) load 事件?

如果一次請求加載的數(shù)據(jù)條數(shù)較少,導(dǎo)致列表內(nèi)容無法鋪滿當(dāng)前屏幕,List 會繼續(xù)觸發(fā) load 事件,直到內(nèi)容鋪滿屏幕或數(shù)據(jù)全部加載完成。因此你需要調(diào)整每次獲取的數(shù)據(jù)條數(shù),理想情況下每次請求獲取的數(shù)據(jù)條數(shù)應(yīng)能夠填滿一屏高度。

loading 和 finished 分別是什么含義?

List有以下三種狀態(tài),理解這些狀態(tài)有助于你正確地使用List組件:

  • 非加載中,loading為false,此時會根據(jù)列表滾動位置判斷是否觸發(fā)load事件(列表內(nèi)容不足一屏幕時,會直接觸發(fā))
  • 加載中,loading為true,表示正在發(fā)送異步請求,此時不會觸發(fā)load事件
  • 加載完成,finished為true,此時不會觸發(fā)load事件

在每次請求完畢后,需要手動將loading設(shè)置為false,表示加載結(jié)束

使用 float 布局后一直觸發(fā)加載?

若 List 的內(nèi)容使用了 float 布局,可以在容器上添加van-clearfix類名來清除浮動,使得 List 能正確判斷元素位置

<van-list>
  <div class="van-clearfix">
    <div class="float-item" />
    <div class="float-item" />
    <div class="float-item" />
  </div>
</van-list>

在 html、body 上設(shè)置 overflow 后一直觸發(fā)加載?

如果在 html 和 body 標(biāo)簽上設(shè)置了overflow-x: hidden樣式,會導(dǎo)致 List 一直觸發(fā)加載。

html,
body {
  overflow-x: hidden;
}

這個問題的原因是當(dāng)元素設(shè)置了overflow-x: hidden樣式時,該元素的overflow-y會被瀏覽器設(shè)置為auto,而不是默認(rèn)值visible,導(dǎo)致 List 無法正確地判斷滾動容器。解決方法是去除該樣式,或者在 html 和 body 標(biāo)簽上添加height: 100%樣式。


實例演示

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號