diff --git a/src/list/README.md b/src/list/README.md
index 7236c79fb..9c0d32d14 100644
--- a/src/list/README.md
+++ b/src/list/README.md
@@ -37,7 +37,6 @@ export default {
finished: false
};
},
-
methods: {
onLoad() {
setTimeout(() => {
@@ -49,7 +48,7 @@ export default {
if (this.list.length >= 40) {
this.finished = true;
}
- }, 500);
+ }, 1000);
}
}
}
@@ -77,7 +76,6 @@ export default {
loading: false
};
},
-
methods: {
onLoad() {
fetchSomeThing().catch(() => {
@@ -88,6 +86,58 @@ export default {
}
```
+### PullRefresh
+
+```html
+
+
+
+
+
+```
+
+```js
+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() {
+ this.finished = false;
+ this.loading = true;
+ this.onLoad();
+ }
+ }
+}
+```
+
## API
### Props
diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md
index 4ed61b674..3d741d24f 100644
--- a/src/list/README.zh-CN.md
+++ b/src/list/README.zh-CN.md
@@ -39,14 +39,15 @@ export default {
finished: false
};
},
-
methods: {
onLoad() {
// 异步更新数据
+ // setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
+
// 加载状态结束
this.loading = false;
@@ -54,7 +55,7 @@ export default {
if (this.list.length >= 40) {
this.finished = true;
}
- }, 500);
+ }, 1000);
}
}
}
@@ -84,7 +85,6 @@ export default {
loading: false
};
},
-
methods: {
onLoad() {
fetchSomeThing().catch(() => {
@@ -95,6 +95,64 @@ export default {
}
```
+### 下拉刷新
+
+List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果
+
+```html
+
+
+
+
+
+```
+
+```js
+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() {
+ // 清空列表数据
+ this.finished = false;
+
+ // 重新加载数据
+ // 将 loading 设置为 true，表示处于加载状态
+ this.loading = true;
+ this.onLoad();
+ }
+ }
+}
+```
+
## API
### Props
diff --git a/src/list/demo/index.vue b/src/list/demo/index.vue
index 99beb8e25..0a25c2005 100644
--- a/src/list/demo/index.vue
+++ b/src/list/demo/index.vue
@@ -2,28 +2,37 @@
-
-
-
-
-
+
+
+
-
+
+
+
+
+
+
+
-
+
@@ -36,13 +45,15 @@ export default {
i18n: {
'zh-CN': {
errorInfo: '错误提示',
- finishedText: '没有更多了',
errorText: '请求失败，点击重新加载',
+ pullRefresh: '下拉刷新',
+ finishedText: '没有更多了',
},
'en-US': {
errorInfo: 'Error Info',
- finishedText: 'Finished',
errorText: 'Request failed. Click to reload',
+ pullRefresh: 'PullRefresh',
+ finishedText: 'Finished',
},
},
@@ -63,24 +74,35 @@ export default {
error: false,
finished: false,
},
+ {
+ items: [],
+ refreshing: false,
+ loading: false,
+ error: false,
+ finished: false,
+ },
],
};
},
methods: {
- onLoad(index, isRefresh) {
+ onLoad(index) {
const list = this.list[index];
list.loading = true;
+
setTimeout(() => {
- if (isRefresh) {
+ if (list.refreshing) {
list.items = [];
+ list.refreshing = false;
}
for (let i = 0; i < 10; i++) {
const text = list.items.length + 1;
list.items.push(text < 10 ? '0' + text : text);
}
+
list.loading = false;
+ list.refreshing = false;
// show error info in second demo
if (index === 1 && list.items.length === 10 && !list.error) {
@@ -92,17 +114,12 @@ export default {
if (list.items.length >= 40) {
list.finished = true;
}
- }, 500);
+ }, 1000);
},
onRefresh(index) {
- const list = this.list[index];
- setTimeout(() => {
- list.error = false;
- list.finished = false;
- list.refreshing = false;
- this.onLoad(index, true);
- }, 1000);
+ this.list[index].finished = false;
+ this.onLoad(index);
},
},
};
diff --git a/src/list/test/__snapshots__/demo.spec.js.snap b/src/list/test/__snapshots__/demo.spec.js.snap
index 41e123a54..6faa69720 100644
--- a/src/list/test/__snapshots__/demo.spec.js.snap
+++ b/src/list/test/__snapshots__/demo.spec.js.snap
@@ -7,26 +7,25 @@ exports[`renders demo correctly 1`] = `