介紹

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

引入import Vue from 'vue';

import { List } from 'vant';

Vue.use(List);

代碼演示

基礎(chǔ)用法

List 組件通過loading和finished兩個(gè)變量控制加載狀態(tài)，當(dāng)組件滾動(dòng)到底部時(shí)，會(huì)觸發(fā)load事件并將loading設(shè)置成true。此時(shí)可以發(fā)起異步操作并更新數(shù)據(jù)，數(shù)據(jù)更新完畢后，將loading設(shè)置成false即可。若數(shù)據(jù)已全部加載完畢，則直接將finished設(shè)置成true即可。

v-model="loading"

:finished="finished"

finished-text="沒有更多了"

@load="onLoad"

>

export default {

data() {

return {

list: [],

loading: false,

finished: false

};

},

methods: {

onLoad() {

// 異步更新數(shù)據(jù)

// setTimeout 僅做示例，真實(shí)場(chǎng)景中一般為 ajax 請(qǐng)求

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);

}

}

}

錯(cuò)誤提示

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

v-model="loading"

:error.sync="error"

error-text="請(qǐng)求失敗，點(diǎn)擊重新加載"

@load="onLoad"

>

export default {

data() {

return {

list: [],

error: false,

loading: false

};

},

methods: {

onLoad() {

fetchSomeThing().catch(() => {

this.error = true;

})

}

}

}

下拉刷新

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

v-model="loading"

:finished="finished"

finished-text="沒有更多了"

@load="onLoad"

>

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是否加載失敗，加載失敗后點(diǎn)擊錯(cuò)誤提示可以重新

觸發(fā)load事件，必須使用sync修飾符booleanfalse

offset滾動(dòng)條與底部距離小于 offset 時(shí)觸發(fā)load事件number | string300

loading-text加載過程中的提示文案string加載中...

finished-text加載完成后的提示文案string-

error-text加載失敗后的提示文案string-

immediate-check是否在初始化時(shí)立即執(zhí)行滾動(dòng)位置檢查booleantrue

direction滾動(dòng)觸發(fā)加載的方向，可選值為upstringdown

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

方法

通過 ref 可以獲取到 List 實(shí)例并調(diào)用實(shí)例方法，詳見?組件實(shí)例方法方法名說明參數(shù)返回值check檢查當(dāng)前的滾動(dòng)位置，若已滾動(dòng)至底部，則會(huì)觸發(fā) load 事件--

Slots名稱說明default列表內(nèi)容

loading自定義底部加載中提示

finished自定義加載完成后的提示文案

error自定義加載失敗后的提示文案

常見問題

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

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

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

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

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

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

loading 和 finished 分別是什么含義？

List有以下三種狀態(tài)，理解這些狀態(tài)有助于你正確地使用List組件：非加載中，loading為false，此時(shí)會(huì)根據(jù)列表滾動(dòng)位置判斷是否觸發(fā)load事件(列表內(nèi)容不足一屏幕時(shí)，會(huì)直接觸發(fā))

加載中，loading為true，表示正在發(fā)送異步請(qǐng)求，此時(shí)不會(huì)觸發(fā)load事件

加載完成，finished為true，此時(shí)不會(huì)觸發(fā)load事件

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

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

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

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

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

body {

overflow-x: hidden;

}

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

總結(jié)

以上是生活随笔為你收集整理的vant 做表格_Vant List 列表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。