You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
232 lines
5.7 KiB
232 lines
5.7 KiB
<template>
|
|
<view class="u-load-more-wrap" :style="{
|
|
backgroundColor: bgColor,
|
|
marginBottom: marginBottom + 'rpx',
|
|
marginTop: marginTop + 'rpx',
|
|
height: $u.addUnit(height)
|
|
}">
|
|
<view class="u-line"></view>
|
|
<!-- 加载中和没有更多的状态才显示两边的横线 -->
|
|
<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
|
|
<view class="u-loadmore-icon-wrap">
|
|
<view v-if="status == 'loading' && icon" class=" u-loadmore-iconu-loading u-loading-circle"
|
|
:style="[cricleStyle]"></view>
|
|
</view>
|
|
<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
|
|
<view class="u-line-1" :style="[loadTextStyle]"
|
|
:class="[status == 'nomore' && isDot == true ? 'u-dot-text' : 'u-more-text']" @tap="loadMore">{{
|
|
showText
|
|
}}</view>
|
|
</view>
|
|
<view class="u-line"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* loadmore 加载更多
|
|
* @description 此组件一般用于标识页面底部加载数据时的状态。
|
|
* @tutorial https://www.uviewui.com/components/loadMore.html
|
|
* @property {String} status 组件状态（默认loadmore）
|
|
* @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff）
|
|
* @property {Boolean} icon 加载中时是否显示图标（默认true）
|
|
* @property {String} icon-type 加载中时的图标类型（默认circle）
|
|
* @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
|
|
* @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
|
|
* @property {String} color 字体颜色（默认#606266）
|
|
* @property {String Number} margin-top 到上一个相邻元素的距离
|
|
* @property {String Number} margin-bottom 到下一个相邻元素的距离
|
|
* @property {Object} load-text 自定义显示的文字，见上方说明示例
|
|
* @event {Function} loadmore status为loadmore时，点击组件会发出此事件
|
|
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
|
|
*/
|
|
export default {
|
|
name: 'u-loadmore',
|
|
props: {
|
|
// 组件背景色
|
|
bgColor: {
|
|
type: String,
|
|
default: 'transparent'
|
|
},
|
|
// 是否显示加载中的图标
|
|
icon: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 字体大小
|
|
fontSize: {
|
|
type: String,
|
|
default: '28'
|
|
},
|
|
// 字体颜色
|
|
color: {
|
|
type: String,
|
|
default: '#606266'
|
|
},
|
|
// 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
|
|
status: {
|
|
type: [String, Object],
|
|
default: 'loadmore'
|
|
},
|
|
// 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标
|
|
iconType: {
|
|
type: String,
|
|
default: 'circle'
|
|
},
|
|
// 显示的文字
|
|
loadText: {
|
|
type: Object,
|
|
default() {
|
|
return {
|
|
loadmore: '加载更多',
|
|
loading: '正在加载...',
|
|
nomore: '没有更多了'
|
|
};
|
|
}
|
|
},
|
|
// 在“没有更多”状态下，是否显示粗点
|
|
isDot: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 加载中显示圆圈动画时，动画的颜色
|
|
iconColor: {
|
|
type: String,
|
|
default: '#b7b7b7'
|
|
},
|
|
// 上边距
|
|
marginTop: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
// 下边距
|
|
marginBottom: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
// 高度，单位rpx
|
|
height: {
|
|
type: [String, Number],
|
|
default: 'auto'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// 粗点
|
|
dotText: '●'
|
|
};
|
|
},
|
|
computed: {
|
|
// 加载的文字显示的样式
|
|
loadTextStyle() {
|
|
return {
|
|
color: this.color,
|
|
fontSize: this.fontSize + 'rpx',
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
backgroundColor: this.bgColor
|
|
// 如果是加载中状态，动画和文字需要距离近一点
|
|
};
|
|
},
|
|
// 加载中圆圈动画的样式
|
|
cricleStyle() {
|
|
return {
|
|
borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${this.iconColor}`
|
|
};
|
|
},
|
|
// 加载中花朵动画形式
|
|
// 动画由base64图片生成，暂不支持修改
|
|
flowerStyle() {
|
|
return {};
|
|
},
|
|
// 显示的提示文字
|
|
showText() {
|
|
let text = '';
|
|
if (this.status == 'loadmore') text = this.loadText.loadmore;
|
|
else if (this.status == 'loading') text = this.loadText.loading;
|
|
else if (this.status == 'nomore' && this.isDot) text = this.dotText;
|
|
else text = this.loadText.nomore;
|
|
return text;
|
|
}
|
|
},
|
|
methods: {
|
|
loadMore() {
|
|
// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
|
|
if (this.status == 'loadmore') this.$emit('loadmore');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '../../libs/css/style.components.scss';
|
|
|
|
|
|
.u-line {
|
|
vertical-align: middle;
|
|
// 此处采用兼容分开写，兼容nvue的写法
|
|
width: 50rpx;
|
|
border-bottom: 1px solid rgb(204, 204, 204);
|
|
transform: scaleY(0.5);
|
|
}
|
|
|
|
.u-load-more-wrap {
|
|
@include vue-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.u-load-more-inner {
|
|
@include vue-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 12rpx;
|
|
}
|
|
|
|
.u-more {
|
|
position: relative;
|
|
@include vue-flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.u-dot-text {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.u-loadmore-icon-wrap {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.u-loadmore-icon {
|
|
@include vue-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.u-loading-circle {
|
|
/* #ifndef APP-NVUE */
|
|
display: inline-flex;
|
|
/* #endif */
|
|
vertical-align: middle;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
background: 0 0;
|
|
border-radius: 50%;
|
|
border: 2px solid;
|
|
border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
|
|
animation: u-circle 1s linear infinite;
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
border-color: #e4e4e4 #e4e4e4 #e4e4e4 #c7c7c7;
|
|
}
|
|
|
|
@-webkit-keyframes u-circle {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
|