forked from angelo/web-retail-h5
151 lines
4.5 KiB
Vue
151 lines
4.5 KiB
Vue
<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>
|