diff --git a/packages/info/index.less b/packages/info/index.less
index b4815dc67..a8b3bff98 100644
--- a/packages/info/index.less
+++ b/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;
- color: @van-info-color;
- font-size: @van-info-font-size;
- font-weight: @van-info-font-weight;
- font-family: @van-info-font-family;
+ top: -@info-size / 2;
+ color: @info-color;
+ font-size: @info-font-size;
+ font-weight: @info-font-weight;
+ font-family: @info-font-family;
text-align: center;
box-sizing: border-box;
- padding: @van-info-padding;
- min-width: @van-info-size;
- line-height: @van-info-size - @van-info-border-width * 2;
- border: @van-info-border-width solid @white;
- border-radius: @van-info-size;
- background-color: @van-info-background-color;
+ padding: @info-padding;
+ min-width: @info-size;
+ line-height: @info-size - @info-border-width * 2;
+ border: @info-border-width solid @white;
+ border-radius: @info-size;
+ background-color: @info-background-color;
transform: translateX(50%);
transform-origin: 100%;
}
diff --git a/packages/list/demo/index.vue b/packages/list/demo/index.vue
index 32d77233a..de972efed 100644
--- a/packages/list/demo/index.vue
+++ b/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'
}
},
diff --git a/packages/list/en-US.md b/packages/list/en-US.md
index e3cfa2f26..eee39073d 100644
--- a/packages/list/en-US.md
+++ b/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
diff --git a/packages/list/index.less b/packages/list/index.less
index 4d66cbdec..928ac022f 100644
--- a/packages/list/index.less
+++ b/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;
}
}
}
diff --git a/packages/list/index.vue b/packages/list/index.vue
index 39317b6aa..d7940466b 100644
--- a/packages/list/index.vue
+++ b/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;
}
diff --git a/packages/list/test/__snapshots__/demo.spec.js.snap b/packages/list/test/__snapshots__/demo.spec.js.snap
index 1239f6139..5a3ece653 100644
--- a/packages/list/test/__snapshots__/demo.spec.js.snap
+++ b/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>
diff --git a/packages/list/zh-CN.md b/packages/list/zh-CN.md
index 0ffb5cbe5..abe3c0e9d 100644
--- a/packages/list/zh-CN.md
+++ b/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
diff --git a/packages/style/var.less b/packages/style/var.less
index 5a8e91fb8..1b8e1f6b1 100644
--- a/packages/style/var.less
+++ b/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;
\ No newline at end of file