loadMore 加载更多

此组件一般用于标识页面底部加载数据时的状态，共有三种状态：

• 加载前，显示”加载更多”，加入点击可选，是因为数据不够一页时，无法触发页面的onReachBottom生命周期
• 加载中，显示”正在加载…”，2种动画可选
• 加载后，如果还有数据，回到”加载前”状态，否则加载结束，显示”没有更多了”

平台差异说明

基本使用

• 通过status设置组件的状态，加载前值为loadmore，加载中为loading，没有数据为nomore

注意：以下示例仅为模拟效果，实际中请根据自己的逻辑，修改代码的实现

<template>
    <view class="wrap">
        <view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
            {{'第' + item + '条数据'}}
        </view>
        <u-loadmore :status="status" />
    </view>
</template>
<script>
    export default {
        data() {
            return {
                status: 'loadmore',
                list: 15,
                page: 0
            }
        },
        onReachBottom() {
            if(this.page >= 3) return ;
            this.status = 'loading';
            this.page = ++ this.page;
            setTimeout(() => {
                this.list += 10;
                if(this.page >= 3) this.status = 'nomore';
                else this.status = 'loading';
            }, 2000)
        }
    }
</script>
<style lang="scss" scoped>
    .wrap {
        padding: 24rpx;
    }
    .item {
        padding: 24rpx 0;
        color: $u-content-color;
        font-size: 28rpx;
    }
</style>

控制组件的提示以及动画效果

• 可以通过icon-type设置加载中的图标为flower或者circle，如果不需要图标，可以设置icon为false
• 可以设置is-dot为true，在没有数据时，内容显示为一个”●”替代默认的”没有更多了”
• 可以通过配置load-text配置提示的文字，该参数为一个对象值，可以修改默认的文字提示，见如下：

<template>
    <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
</template>
<script>
    export default {
        data() {
            return {
                status: 'loadmore',
                iconType: 'flower',
                loadText: {
                    loadmore: '轻轻上拉',
                    loading: '努力加载中',
                    nomore: '实在没有了'
                }
            }
        }
    }
</script>

手动触发加载更多

有时候可能会因为网络，或者数据不满一页的原因，导致无法上拉触发onReachBottom生命周期，这时候(需status为loadmore状态)，用户点击组件，就会触发loadmore 事件，可以在回调中，进行状态的控制和数据的加载，同时也可以修改loadText的loadmore为”上拉或点击加载更多”进行更加人性化的提示。

API

Props

Event