[new feature] List: add finished-text prop (#2131)

packages/list/demo/index.vue

@@ -9,6 +9,7 @@
         <van-list
           v-model="loading"
           :finished="finished"
+          :finished-text="$t('finishedText')"
           @load="onLoad"
         >
           <van-cell
@@ -26,10 +27,12 @@
 export default {
   i18n: {
     'zh-CN': {
-      text: '当即将滚动到元素底部时，会自动加载更多'
+      text: '当即将滚动到元素底部时，会自动加载更多',
+      finishedText: '没有更多了'
     },
     'en-US': {
-      text: 'This list will load items will scroll to bottom.'
+      text: 'This list will load items will scroll to bottom.',
+      finishedText: 'Finished'
     }
   },
 

packages/list/en-US.md

@@ -16,6 +16,7 @@ Vue.use(List);
 <van-list
   v-model="loading"
   :finished="finished"
+  :finished-text="Finished"
   @load="onLoad"
 >
   <van-cell
@@ -61,6 +62,7 @@ export default {
 | finished | Whether loading is finished，the `load` event will not be triggered when finished | `Boolean` | `false` |
 | offset | The load event will be triggered when the distance between the scrollbar and the bottom is less than offset | `Number` | `300` |
 | loading-text | Loading text | `String` | `Loading...` |
+| finished-text | Finished text | `String` | - |
 | immediate-check | Whether to check loading position immediately after mounted | `Boolean` | `true` |
 
 ### Event

packages/list/index.less

@@ -1,25 +1,27 @@
 @import '../style/var';
 
 .van-list {
+  &__loading-text,
+  &__finished-text {
+    color: @list-text-color;
+    font-size: @list-text-font-size;
+    line-height: @list-text-line-height;
+    text-align: center;
+  }
+
   &__loading {
     text-align: center;
 
-    .van-loading,
+    &-icon,
     &-text {
       display: inline-block;
       vertical-align: middle;
     }
 
-    .van-loading {
-      width: 16px;
-      height: 16px;
-      margin-right: 5px;
-    }
-
-    &-text {
-      font-size: 13px;
-      color: @gray-dark;
-      line-height: 50px;
+    &-icon {
+      width: @list-icon-size;
+      height: @list-icon-size;
+      margin-right: @list-icon-margin-right;
     }
   }
 }

packages/list/index.vue

@@ -2,14 +2,20 @@
   <div :class="b()">
     <slot />
     <div
-      v-show="loading"
+      v-if="loading"
       :class="b('loading')"
     >
       <slot name="loading">
-        <loading />
+        <loading :class="b('loading-icon')" />
         <span :class="b('loading-text')">{{ loadingText || $t('loadingTip') }}</span>
       </slot>
     </div>
+    <div
+      v-if="finished && finishedText"
+      :class="b('finished-text')"
+    >
+      {{ finishedText }}
+    </div>
   </div>
 </template>
 
@@ -28,6 +34,8 @@ export default create({
   props: {
     loading: Boolean,
     finished: Boolean,
+    loadingText: String,
+    finishedText: String,
     immediateCheck: {
       type: Boolean,
       default: true
@@ -35,8 +43,7 @@ export default create({
     offset: {
       type: Number,
       default: 300
-    },
-    loadingText: String
+    }
   },
 
   mounted() {
@@ -81,7 +88,11 @@ export default create({
       const scrollerHeight = utils.getVisibleHeight(scroller);
 
       /* istanbul ignore next */
-      if (!scrollerHeight || utils.getComputedStyle(el).display === 'none' || el.offsetParent === null) {
+      if (
+        !scrollerHeight ||
+        utils.getComputedStyle(el).display === 'none' ||
+        el.offsetParent === null
+      ) {
         return;
       }
 

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

@@ -12,8 +12,8 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-list">
-          <div class="van-list__loading" style="display:none;">
-            <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span class="van-list__loading-text">加载中...</span></div>
+          <!---->
+          <!---->
         </div>
       </div>
     </div>

packages/list/zh-CN.md

@@ -18,6 +18,7 @@ List 组件通过`loading`和`finished`两个变量控制加载状态，当组
 <van-list
   v-model="loading"
   :finished="finished"
+  :finished-text="没有更多了"
   @load="onLoad"
 >
   <van-cell
@@ -65,7 +66,8 @@ export default {
 | loading | 是否处于加载状态，加载过程中不触发`load`事件 | `Boolean` | `false` | - |
 | finished | 是否已加载完成，加载完成后不再触发`load`事件 | `Boolean` | `false` | - |
 | offset | 滚动条与底部距离小于 offset 时触发`load`事件 | `Number` | `300` | - |
-| loading-text | 加载中提示文案 | `String` | `加载中...` | 1.1.1 |
+| loading-text | 加载过程中的提示文案 | `String` | `加载中...` | 1.1.1 |
+| finished-text | 加载完成后的提示文案 | `String` | - | 1.4.6 |
 | immediate-check | 是否在初始化时立即执行滚动位置检查 | `Boolean` | `true` | - |
 
 ### Event