docs(List): add PullRefresh demo (#5579)

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
+<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+  <van-list
+    v-model="loading"
+    :finished="finished"
+    finished-text="Finished"
+    @load="onLoad"
+  >
+    <van-cell v-for="item in list" :key="item" :title="item" />
+  </van-list>
+</van-pull-refresh>
+```
+
+```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

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
+<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>
+```
+
+```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

src/list/demo/index.vue

@@ -2,28 +2,37 @@
   <demo-section>
     <van-tabs>
       <van-tab :title="$t('basicUsage')">
-        <van-pull-refresh v-model="list[0].refreshing" @refresh="onRefresh(0)">
+        <van-list
-          <van-list
+          v-model="list[0].loading"
-            v-model="list[0].loading"
+          :finished="list[0].finished"
-            :finished="list[0].finished"
+          :finished-text="$t('finishedText')"
-            :finished-text="$t('finishedText')"
+          @load="onLoad(0)"
-            @load="onLoad(0)"
+        >
-          >
+          <van-cell v-for="item in list[0].items" :key="item" :title="item" />
-            <van-cell v-for="item in list[0].items" :key="item" :title="item" />
+        </van-list>
-          </van-list>
-        </van-pull-refresh>
       </van-tab>
 
       <van-tab :title="$t('errorInfo')">
-        <van-pull-refresh v-model="list[1].refreshing" @refresh="onRefresh(1)">
+        <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-tab>
+
+      <van-tab :title="$t('pullRefresh')">
+        <van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)">
           <van-list
-            v-model="list[1].loading"
+            v-model="list[2].loading"
-            :finished="list[1].finished"
+            :finished="list[2].finished"
-            :error.sync="list[1].error"
+            :finished-text="$t('finishedText')"
-            :error-text="$t('errorText')"
+            @load="onLoad(2)"
-            @load="onLoad(1)"
           >
-            <van-cell v-for="item in list[1].items" :key="item" :title="item" />
+            <van-cell v-for="item in list[2].items" :key="item" :title="item" />
           </van-list>
         </van-pull-refresh>
       </van-tab>
@@ -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];
+      this.list[index].finished = false;
-      setTimeout(() => {
+      this.onLoad(index);
-        list.error = false;
-        list.finished = false;
-        list.refreshing = false;
-        this.onLoad(index, true);
-      }, 1000);
     },
   },
 };

src/list/test/__snapshots__/demo.spec.js.snap

@@ -7,26 +7,25 @@ exports[`renders demo correctly 1`] = `
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
         <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">基础用法<!----></span></div>
         <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">错误提示<!----></span></div>
+        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">下拉刷新<!----></span></div>
         <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
     <div class="van-tabs__content">
       <div role="tabpanel" class="van-tab__pane" style="">
-        <div class="van-pull-refresh">
+        <div role="feed" class="van-list" aria-busy="true">
-          <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
+          <div class="van-list__loading">
-            <div class="van-pull-refresh__head"></div>
+            <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 16px; height: 16px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
-            <div role="feed" class="van-list" aria-busy="true">
-              <div class="van-list__loading">
-                <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 16px; height: 16px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
-              </div>
-              <div class="van-list__placeholder"></div>
-            </div>
           </div>
+          <div class="van-list__placeholder"></div>
         </div>
       </div>
       <div role="tabpanel" class="van-tab__pane" style="display: none;">
         <!---->
       </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </div>
     </div>
   </div>
 </div>