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

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
-            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-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-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"
-            :finished="list[1].finished"
-            :error.sync="list[1].error"
-            :error-text="$t('errorText')"
-            @load="onLoad(1)"
+            v-model="list[2].loading"
+            :finished="list[2].finished"
+            :finished-text="$t('finishedText')"
+            @load="onLoad(2)"
           >
-            <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];
-      setTimeout(() => {
-        list.error = false;
-        list.finished = false;
-        list.refreshing = false;
-        this.onLoad(index, true);
-      }, 1000);
+      this.list[index].finished = false;
+      this.onLoad(index);
     },
   },
 };