u-loadmore.vue
4.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<template>
<view
class="u-loadmore"
:style="[
$u.addStyle(customStyle),
{
backgroundColor: bgColor,
marginBottom: $u.addUnit(marginBottom),
marginTop: $u.addUnit(marginTop),
height: $u.addUnit(height),
},
]"
>
<u-line
length="140rpx"
:color="lineColor"
:hairline="false"
:dashed="dashed"
v-if="line"
></u-line>
<!-- 加载中和没有更多的状态才显示两边的横线 -->
<view
:class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''"
class="u-loadmore__content"
>
<view
class="u-loadmore__content__icon-wrap"
v-if="status === 'loading' && icon"
>
<u-loading-icon
:color="iconColor"
:size="iconSize"
:mode="loadingIcon"
></u-loading-icon>
</view>
<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
<text
class="u-line-1"
:style="[loadTextStyle]"
:class="[(status == 'nomore' && isDot == true) ? 'u-loadmore__content__dot-text' : 'u-loadmore__content__text']"
@tap="loadMore"
>{{ showText }}</text>
</view>
<u-line
length="140rpx"
:color="lineColor"
:hairline="false"
:dashed="dashed"
v-if="line"
></u-line>
</view>
</template>
<script>
import props from './props.js';
/**
* loadmore 加载更多
* @description 此组件一般用于标识页面底部加载数据时的状态。
* @tutorial https://www.uviewui.com/components/loadMore.html
* @property {String} status 组件状态（默认 'loadmore' ）
* @property {String} bgColor 组件背景颜色，在页面是非白色时会用到（默认 'transparent' ）
* @property {Boolean} icon 加载中时是否显示图标（默认 true ）
* @property {String | Number} fontSize 字体大小（默认 14 ）
* @property {String | Number} iconSize 图标大小（默认 17 ）
* @property {String} color 字体颜色（默认 '#606266' ）
* @property {String} loadingIcon 加载图标（默认 'circle' ）
* @property {String} loadmoreText 加载前的提示语（默认 '加载更多' ）
* @property {String} loadingText 加载中提示语（默认 '正在加载...' ）
* @property {String} nomoreText 没有更多的提示语（默认 '没有更多了' ）
* @property {Boolean} isDot 到上一个相邻元素的距离 （默认 false ）
* @property {String} iconColor 加载中图标的颜色 （默认 '#b7b7b7' ）
* @property {String} lineColor 线条颜色（默认 #E6E8EB ）
* @property {String | Number} marginTop 上边距 （默认 10 ）
* @property {String | Number} marginBottom 下边距 （默认 10 ）
* @property {String | Number} height 高度，单位px （默认 'auto' ）
* @property {Boolean} line 是否显示左边分割线 （默认 false ）
* @property {Boolean} dashed // 是否虚线，true-虚线，false-实线 （默认 false ）
* @event {Function} loadmore status为loadmore时，点击组件会发出此事件
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
*/
export default {
name: "u-loadmore",
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
data() {
return {
// 粗点
dotText: "●"
}
},
computed: {
// 加载的文字显示的样式
loadTextStyle() {
return {
color: this.color,
fontSize: uni.$u.addUnit(this.fontSize),
lineHeight: uni.$u.addUnit(this.fontSize),
backgroundColor: this.bgColor,
}
},
// 显示的提示文字
showText() {
let text = '';
if (this.status == 'loadmore') text = this.loadmoreText
else if (this.status == 'loading') text = this.loadingText
else if (this.status == 'nomore' && this.isDot) text = this.dotText;
else text = this.nomoreText;
return text;
}
},
methods: {
loadMore() {
// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
if (this.status == 'loadmore') this.$emit('loadmore');
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-loadmore {
@include flex(row);
align-items: center;
justify-content: center;
flex: 1;
&__content {
margin: 0 15px;
@include flex(row);
align-items: center;
justify-content: center;
&__icon-wrap {
margin-right: 8px;
}
&__text {
font-size: 14px;
color: $u-content-color;
}
&__dot-text {
font-size: 15px;
color: $u-tips-color;
}
}
}
</style>