<template>
    <view class="box">
        <view class="box_next" v-if="loading">
            <image :src="loadingGif" mode="widthFix" class="box_next_img"></image>
            <text class="box_next_text">加载中...</text>
        </view>
        <view v-else>
            <text class="box_else_text">{{ hasMore ? '上拉加载更多' : '触碰到底线了' }}</text>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        loadingGif: {
            type: String,
            default: ''
        },
        loading: Boolean,
        hasMore: Boolean
    },
    methods: {

    }
}
</script>

<style scoped>
.box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */

    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 30rpx;
    height: 100rpx;
}

.box_next {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */

    flex-direction: row;
    align-items: center;
}

.box_next_img {
    width: 35rpx;
}

.box_next_text {
    font-size: 26rpx;
    color: #666666;
    margin-left: 10rpx;
}

.box_else_text {
    font-size: 26rpx;
    color: #666666;
}
</style>