yshi/fuintUniapp/uview-ui/components/u-loadmore/u-loadmore.vue

<template>
    <view class="u-load-more-wrap" :style="{
        backgroundColor: bgColor,
        marginBottom: marginBottom + 'rpx',
        marginTop: marginTop + 'rpx',
        height: $u.addUnit(height)
    }">
        <u-line color="#d4d4d4" length="50"></u-line>
        <!-- 加载中和没有更多的状态才显示两边的横线 -->
        <view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
            <view class="u-loadmore-icon-wrap">
                <u-loading class="u-loadmore-icon" :color="iconColor" :mode="iconType == 'circle' ? 'circle' : 'flower'" :show="status == 'loading' && icon"></u-loading>
            </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>
        <u-line color="#d4d4d4" length="50"></u-line>
    </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,
                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.circleColor}`
                }
            },
            // 加载中花朵动画形式
            // 动画由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";
    
    /* #ifdef MP */
    // 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它
    // 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用
    u-line {
        flex: none;
    }
    /* #endif */
    
    .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;
    }
</style>