diff --git a/packages/list/demo/index.vue b/packages/list/demo/index.vue index b02031fd5..de63c63a7 100644 --- a/packages/list/demo/index.vue +++ b/packages/list/demo/index.vue @@ -1,35 +1,47 @@ @@ -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); } diff --git a/packages/list/en-US.md b/packages/list/en-US.md index a8384db47..4e63f1d26 100644 --- a/packages/list/en-US.md +++ b/packages/list/en-US.md @@ -16,9 +16,7 @@ Vue.use(List); = 40) { this.finished = true; } @@ -60,6 +54,43 @@ export default { } ``` +### Error Info + +```html + + + +``` + +```js +export default { + data() { + return { + list: [], + error: false, + loading: false + }; + }, + + methods: { + onLoad() { + fetchSomeThing().catch(() => { + this.error = true; + }) + } + } +} +``` + ### API | Attribute | Description | Type | Default | diff --git a/packages/list/index.js b/packages/list/index.js index 906bbe30a..e05bfdd0d 100644 --- a/packages/list/index.js +++ b/packages/list/index.js @@ -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 diff --git a/packages/list/test/__snapshots__/demo.spec.js.snap b/packages/list/test/__snapshots__/demo.spec.js.snap index 262acd369..4489ae329 100644 --- a/packages/list/test/__snapshots__/demo.spec.js.snap +++ b/packages/list/test/__snapshots__/demo.spec.js.snap @@ -2,23 +2,20 @@ exports[`renders demo correctly 1`] = `
-
-
-

当即将滚动到元素底部时,会自动加载更多

-
-
-
- 模拟加载失败 - +
+
+
+
-
-
-
- - -
-
+
+ +
diff --git a/packages/list/zh-CN.md b/packages/list/zh-CN.md index e664768d7..1f8397243 100644 --- a/packages/list/zh-CN.md +++ b/packages/list/zh-CN.md @@ -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 = 40) { this.finished = true; @@ -65,17 +59,56 @@ export default { } ``` +### 错误提示 + +若列表数据加载失败,将`error`设置成`true`即可显示错误提示,用户点击错误提示后会重新触发 load 事件。 + +```html + + + +``` + +```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 | 是否加载失败,加载失败后点击错误提示可以重新
触发`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