mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] List: update demo & document (#2573)
This commit is contained in:
neverland
GitHub
parent
c43edf987f
commit
58b54b1970
@ -1,35 +1,47 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="page-desc">
|
||||
<p class="page-desc--text">{{ $t('text') }}</p>
|
||||
<van-checkbox
|
||||
class="page-desc--option"
|
||||
v-model="loadedError"
|
||||
<van-tabs>
|
||||
<van-tab :title="$t('basicUsage')">
|
||||
<van-pull-refresh
|
||||
v-model="list[0].refreshing"
|
||||
@refresh="onRefresh(0)"
|
||||
>
|
||||
模拟加载失败
|
||||
</van-checkbox>
|
||||
</div>
|
||||
<van-pull-refresh
|
||||
v-model="refreshing"
|
||||
@refresh="onRefresh"
|
||||
>
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
:error.sync="error"
|
||||
:finished-text="$t('finishedText')"
|
||||
:error-text="$t('errorText')"
|
||||
@load="onLoad"
|
||||
<van-list
|
||||
v-model="list[0].loading"
|
||||
:finished="list[0].finished"
|
||||
:finished-text="$t('finishedText')"
|
||||
@load="onLoad(0)"
|
||||
>
|
||||
<van-cell
|
||||
v-for="item in list[0].items"
|
||||
:key="item"
|
||||
:title="item"
|
||||
/>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</van-tab>
|
||||
|
||||
<van-tab :title="$t('errorInfo')">
|
||||
<van-pull-refresh
|
||||
v-model="list[1].refreshing"
|
||||
@refresh="onRefresh(1)"
|
||||
>
|
||||
<van-cell
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:title="item + ''"
|
||||
/>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</demo-block>
|
||||
<van-list
|
||||
v-model="list[1].loading"
|
||||
:finished="list[1].finished"
|
||||
:error.sync="list[1].error"
|
||||
:error-text="$t('errorText')"
|
||||
@load="onLoad(1)"
|
||||
>
|
||||
<van-cell
|
||||
v-for="item in list[1].items"
|
||||
:key="item"
|
||||
:title="item"
|
||||
/>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -37,58 +49,65 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '当即将滚动到元素底部时，会自动加载更多',
|
||||
errorInfo: '错误提示',
|
||||
finishedText: '没有更多了',
|
||||
errorText: '请求失败，点击重新加载...'
|
||||
errorText: '请求失败，点击重新加载'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'This list will load items will scroll to bottom.',
|
||||
errorInfo: 'Error Info',
|
||||
finishedText: 'Finished',
|
||||
errorText: 'Request failed. Click to reload...'
|
||||
errorText: 'Request failed. Click to reload'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
refreshing: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
finished: false,
|
||||
loadedError: false
|
||||
list: [{
|
||||
items: [],
|
||||
refreshing: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
finished: false
|
||||
}, {
|
||||
items: [],
|
||||
refreshing: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
finished: false
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLoad() {
|
||||
if (this.loadedError) {
|
||||
setTimeout(() => {
|
||||
fetch('http://www.baidu.com').then(res => {
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.error = true;
|
||||
});
|
||||
}, 500);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const text = this.list.length + 1;
|
||||
this.list.push(text < 10 ? '0' + text : text);
|
||||
}
|
||||
this.loading = false;
|
||||
onLoad(index) {
|
||||
const list = this.list[index];
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const text = list.items.length + 1;
|
||||
list.items.push(text < 10 ? '0' + text : text);
|
||||
}
|
||||
list.loading = false;
|
||||
|
||||
if (this.list.length >= 40) {
|
||||
this.finished = true;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
// show error info in second demo
|
||||
if (index === 1 && list.items.length === 10 && !list.error) {
|
||||
list.error = true;
|
||||
} else {
|
||||
list.error = false;
|
||||
}
|
||||
|
||||
if (list.items.length >= 40) {
|
||||
list.finished = true;
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
|
||||
onRefresh() {
|
||||
onRefresh(index) {
|
||||
const list = this.list[index];
|
||||
setTimeout(() => {
|
||||
this.list = [];
|
||||
this.finished = false;
|
||||
this.refreshing = false;
|
||||
list.items = [];
|
||||
list.error = false;
|
||||
list.finished = false;
|
||||
list.refreshing = false;
|
||||
window.scrollTo(0, 10);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
@ -16,9 +16,7 @@ Vue.use(List);
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
:error.sync="error"
|
||||
finished-text="Finished"
|
||||
error-text="Request failed. Click to reload..."
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell
|
||||
@ -36,7 +34,6 @@ export default {
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false
|
||||
error: false
|
||||
};
|
||||
},
|
||||
|
||||
@ -48,9 +45,6 @@ export default {
|
||||
}
|
||||
this.loading = false;
|
||||
|
||||
// when error loaded:
|
||||
// this.error = true;
|
||||
|
||||
if (this.list.length >= 40) {
|
||||
this.finished = true;
|
||||
}
|
||||
@ -60,6 +54,43 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### Error Info
|
||||
|
||||
```html
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:error.sync="error"
|
||||
error-text="Request failed. Click to reload"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:title="item"
|
||||
/>
|
||||
</van-list>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
error: false,
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLoad() {
|
||||
fetchSomeThing().catch(() => {
|
||||
this.error = true;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|
||||
@ -11,12 +11,12 @@ export default sfc({
|
||||
},
|
||||
|
||||
props: {
|
||||
error: Boolean,
|
||||
loading: Boolean,
|
||||
finished: Boolean,
|
||||
error: Boolean,
|
||||
errorText: String,
|
||||
loadingText: String,
|
||||
finishedText: String,
|
||||
errorText: String,
|
||||
immediateCheck: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
||||
@ -2,23 +2,20 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="page-desc">
|
||||
<p class="page-desc--text">当即将滚动到元素底部时，会自动加载更多</p>
|
||||
<div class="page-desc--option van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
模拟加载失败
|
||||
</span>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
|
||||
<div class="van-tabs__line" style="background-color:undefined;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition:0ms;transform:translate3d(0,0px, 0);">
|
||||
<div class="van-pull-refresh__head">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-list"></div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
## List 列表
|
||||
瀑布流滚动加载，用于控制长列表的展示
|
||||
瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
@ -12,15 +12,13 @@ Vue.use(List);
|
||||
|
||||
#### 基础用法
|
||||
|
||||
List 组件通过`loading`、`finished`和`error`三个变量控制加载状态，当组件滚动到底部时，会触发`load`事件并将`loading`设置成`true`。此时可以发起异步操作并更新数据，数据更新完毕后，将`loading`设置成`false`即可。若数据已全部加载完毕，则直接将`finished`设置成`true`即可。若数据加载失败，将`error`设置成`true`，出现错误提示，用户点击错误提示，重新请求。
|
||||
List 组件通过`loading`和`finished`两个变量控制加载状态，当组件滚动到底部时，会触发`load`事件并将`loading`设置成`true`。此时可以发起异步操作并更新数据，数据更新完毕后，将`loading`设置成`false`即可。若数据已全部加载完毕，则直接将`finished`设置成`true`即可。
|
||||
|
||||
```html
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
:error.sync="error"
|
||||
finished-text="没有更多了"
|
||||
error-text="请求失败，点击重新加载..."
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell
|
||||
@ -37,8 +35,7 @@ export default {
|
||||
return {
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
error: false
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
|
||||
@ -52,9 +49,6 @@ export default {
|
||||
// 加载状态结束
|
||||
this.loading = false;
|
||||
|
||||
// 当请求错误时
|
||||
// this.error = true;
|
||||
|
||||
// 数据全部加载完成
|
||||
if (this.list.length >= 40) {
|
||||
this.finished = true;
|
||||
@ -65,17 +59,56 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### 错误提示
|
||||
|
||||
若列表数据加载失败，将`error`设置成`true`即可显示错误提示，用户点击错误提示后会重新触发 load 事件。
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
error: false,
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLoad() {
|
||||
fetchSomeThing().catch(() => {
|
||||
this.error = true;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| loading | 是否处于加载状态，加载过程中不触发`load`事件 | `Boolean` | `false` | - |
|
||||
| finished | 是否已加载完成，加载完成后不再触发`load`事件 | `Boolean` | `false` | - |
|
||||
| error | 是否加载失败，加载失败后只能通过点击错误提示重新加载`load`事件，必须使用`sync`修饰符 | `Boolean` | `false` | - |
|
||||
| error | 是否加载失败，加载失败后点击错误提示可以重新<br>触发`load`事件，必须使用`sync`修饰符 | `Boolean` | `false` | - |
|
||||
| offset | 滚动条与底部距离小于 offset 时触发`load`事件 | `Number` | `300` | - |
|
||||
| loading-text | 加载过程中的提示文案 | `String` | `加载中...` | 1.1.1 |
|
||||
| finished-text | 加载完成后的提示文案 | `String` | - | 1.4.7 |
|
||||
| error-text | 加载失败后的提示文案 | `String` | - | - |
|
||||
| error-text | 加载失败后的提示文案 | `String` | - | 1.5.3 |
|
||||
| immediate-check | 是否在初始化时立即执行滚动位置检查 | `Boolean` | `true` | - |
|
||||
|
||||
### Event
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user