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

packages/info/index.less

@@ -1,30 +1,21 @@
 @import '../style/var';
 
-@van-info-size: 16px;
-@van-info-color: @white;
-@van-info-padding: 0 3px;
-@van-info-font-size: 12px;
-@van-info-font-weight: 500;
-@van-info-border-width: 1px;
-@van-info-background-color: @red;
-@van-info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
-
 .van-info {
   position: absolute;
   right: 0;
-  top: -@van-info-size / 2;
+  top: -@info-size / 2;
-  color: @van-info-color;
+  color: @info-color;
-  font-size: @van-info-font-size;
+  font-size: @info-font-size;
-  font-weight: @van-info-font-weight;
+  font-weight: @info-font-weight;
-  font-family: @van-info-font-family;
+  font-family: @info-font-family;
   text-align: center;
   box-sizing: border-box;
-  padding: @van-info-padding;
+  padding: @info-padding;
-  min-width: @van-info-size;
+  min-width: @info-size;
-  line-height: @van-info-size - @van-info-border-width * 2;
+  line-height: @info-size - @info-border-width * 2;
-  border: @van-info-border-width solid @white;
+  border: @info-border-width solid @white;
-  border-radius: @van-info-size;
+  border-radius: @info-size;
-  background-color: @van-info-background-color;
+  background-color: @info-background-color;
   transform: translateX(50%);
   transform-origin: 100%;
 }

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 {
+    &-icon {
-      width: 16px;
+      width: @list-icon-size;
-      height: 16px;
+      height: @list-icon-size;
-      margin-right: 5px;
+      margin-right: @list-icon-margin-right;
-    }
-
-    &-text {
-      font-size: 13px;
-      color: @gray-dark;
-      line-height: 50px;
     }
   }
 }

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

packages/style/var.less

@@ -1,4 +1,4 @@
-// color variables
+// Color variables
 @black: #000;
 @white: #fff;
 @red: #f44;
@@ -12,14 +12,14 @@
 @gray-darker: #7d7e80;
 @gray-dark: #969799;
 
-// default colors
+// Default colors
 @text-color: #323233;
 @border-color: #ebedf0;
 @active-color: #e8e8e8;
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;
 
-// button
+// Button
 @button-default-color: @text-color;
 @button-default-background-color: @white;
 @button-default-border-color: @border-color;
@@ -37,19 +37,36 @@
 @button-bottom-action-primary-color: @white;
 @button-bottom-action-primary-background-color: @red;
 
-// checkbox
+// Checkbox
 @checkbox-size: 20px;
 
-// radio
+// Info
+@info-size: 16px;
+@info-color: @white;
+@info-padding: 0 3px;
+@info-font-size: 12px;
+@info-font-weight: 500;
+@info-border-width: 1px;
+@info-background-color: @red;
+@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+
+// List
+@list-icon-size: 16px;
+@list-icon-margin-right: 5px;
+@list-text-color: @gray-dark;
+@list-text-font-size: 13px;
+@list-text-line-height: 50px;
+
+// NumberKeyboard
+@number-keyboard-key-height: 54px;
+@number-keyboard-key-background: #ebedf0;
+
+// Radio
 @radio-size: 20px;
 
-// swipe
+// Swipe
 @swipe-indicator: 6px;
 
-// tab
+// Tab
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;
-
-// number keyboard
-@number-keyboard-key-height: 54px;
-@number-keyboard-key-background: #eBedf0;