[Doc] List: update demo & document (#2573)

packages/list/demo/index.vue

@@ -1,35 +1,47 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <van-tabs>
-      <div class="page-desc">
+      <van-tab :title="$t('basicUsage')">
-        <p class="page-desc--text">{{ $t('text') }}</p>
-        <van-checkbox
-          class="page-desc--option"
-          v-model="loadedError"
-        >
-          模拟加载失败
-        </van-checkbox>
-      </div>
         <van-pull-refresh
-        v-model="refreshing"
+          v-model="list[0].refreshing"
-        @refresh="onRefresh"
+          @refresh="onRefresh(0)"
         >
           <van-list
-          v-model="loading"
+            v-model="list[0].loading"
-          :finished="finished"
+            :finished="list[0].finished"
-          :error.sync="error"
             :finished-text="$t('finishedText')"
-          :error-text="$t('errorText')"
+            @load="onLoad(0)"
-          @load="onLoad"
           >
             <van-cell
-            v-for="item in list"
+              v-for="item in list[0].items"
               :key="item"
-            :title="item + ''"
+              :title="item"
             />
           </van-list>
         </van-pull-refresh>
-    </demo-block>
+      </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-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: [],
+      list: [{
+        items: [],
         refreshing: false,
         loading: false,
         error: false,
-      finished: false,
+        finished: false
-      loadedError: false
+      }, {
+        items: [],
+        refreshing: false,
+        loading: false,
+        error: false,
+        finished: false
+      }]
     };
   },
 
   methods: {
-    onLoad() {
+    onLoad(index) {
-      if (this.loadedError) {
+      const list = this.list[index];
-        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;
+          const text = list.items.length + 1;
-            this.list.push(text < 10 ? '0' + text : text);
+          list.items.push(text < 10 ? '0' + text : text);
         }
-          this.loading = false;
+        list.loading = false;
 
-          if (this.list.length >= 40) {
+        // show error info in second demo
-            this.finished = true;
+        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 = [];
+        list.items = [];
-        this.finished = false;
+        list.error = false;
-        this.refreshing = false;
+        list.finished = false;
+        list.refreshing = false;
         window.scrollTo(0, 10);
       }, 1000);
     }

packages/list/en-US.md

@@ -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 |

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

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

@@ -2,23 +2,20 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div>
+  <div class="van-tabs van-tabs--line">
-    <div class="page-desc">
+    <div class="van-tabs__wrap van-hairline--top-bottom">
-      <p class="page-desc--text">当即将滚动到元素底部时，会自动加载更多</p>
+      <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-      <div class="page-desc--option van-checkbox">
+        <div class="van-tabs__line" style="background-color:undefined;"></div>
-        <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>
     </div>
-    <div class="van-pull-refresh">
+    <div class="van-tabs__content">
-      <div class="van-pull-refresh__track" style="transition:0ms;transform:translate3d(0,0px, 0);">
+      <div class="van-tab__pane" style="display:none;">
-        <div class="van-pull-refresh__head">
         <!---->
         <!---->
       </div>
-        <div class="van-list"></div>
+      <div class="van-tab__pane" style="display:none;">
+        <!---->
+        <!---->
       </div>
     </div>
   </div>

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
 <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,
+      finished: false
-      error: 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