Fusions

Appearance

LoadingMore 加载更多 ​

iPhone

此组件一般用于标识页面底部加载数据时的状态

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

通过 loadingType 属性设置组件的状态，可选值：

  • 0 加载前的状态
  • 1 加载中的状态
  • 2 没有数据的状态

注意

示例仅为模拟效果，请根据自己的逻辑实际情况使用

html
<template>
    <view class="container">
        <view class="container__item" v-for="(item,index) in list" :key="index">
            {{ `第${item}条数据` }}
        </view>
        <fu-loading-more :loadingType="loadingType"></fu-loading-more>
    </view>
</template>

<script>
    import { ref } from 'vue';
    import { onReachBottom } from '@dcloudio/uni-app';

    // data数据
    let list = ref(20);
    let loadingType = ref(0);
    let page = ref(0);

    // 生命周期
    // 页面上拉触底事件处理
    onReachBottom(() => {
        if(page.value >= 3) return;
        loadingType.value = 1;
        page.value++;
        setTimeout(() => {
            list.value += 10;
            if(list.value >= 3) loadingType.value = 2;
            else loadingType.value = 1;
        });
    });
</script>

<style lang="csss" scoped>
    .container {
        padding: 20rpx;

        &__item {
            padding: 20rpx 0;
        }
    }
</style>

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

  • 通过 mode 属性设置加载中的图标，可选值参考Loading 组件
  • 通过 contentText 属性设置提示文字，此参数为一个对象值，可以修改默认的文字提示，示例：
html
<template>
    <fu-loading-more :loadingType="loadingType" :contentText="contentText"></fu-loading-more>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    let loadingType = ref(0);
    const contentText = ref({ 
        contentdown: "上拉加载更多", 
        contentrefresh: "正在努力加载中", 
        contentnomore: "已经很努力了"
    });
</script>

手动触发加载更多 ​

在一些特殊场景下，因为网络或者数据不满一页的原因，导致无法上拉触发 onReachBottom 生命周期，这时候（需 loadingType 为 1 状态），用户组件外层包裹一层 view 增加 click 点击事件，就会触发 1 事件，可以在回调中，进行状态控制和数据的加载，同时也可以修改 contentText 的 contentdown 为"上拉或点击加载更多"进行更加人性化的提示。

API ​

LoadingMore Props ​

属性名说明类型默认值可选值
loadingType组件状态，详见上方基础用法String｜Number01/2
color字体颜色String#777777-
size字体大小String｜Number12-
opacity透明度String｜Number1-
contentText加载提示文字Object--
iconSize图标大小String｜Number18-
mode加载中时的图标类型Stringflower-