mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] List: add finished-text prop (#2131)
This commit is contained in:
neverland
GitHub
parent
58f3bddbaa
commit
c8967fc8ed
@ -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%;
|
||||
}
|
||||
|
||||
@ -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'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
Loading…
x
Reference in New Issue
Block a user