Loadmore 加载更多

17:06

说明

页面底部的加载状态提示，提供 loadmore（加载前，可点击）、loading（加载中）与 nomore（没有更多）三种状态；loadmore / nomore 状态会在文字两侧渲染分隔线，文案、颜色与加载图标类型均可配置。

兼容性

平台	支持情况
App	✅ 支持（loading 态的花朵图标继承 ux-loading，App 端会显示为实心圆点）
H5	✅ 支持
微信小程序	✅ 支持

示例

加载更多

status=loadmore 时点击可触发 loadmore 事件。

查看源码

<template>
    <ux-loadmore status="loadmore" @loadmore="onLoadMore" />
</template>

<script setup lang="uts">
function onLoadMore(): void {
    uni.showToast({ title: '加载更多', icon: 'none' });
}
</script>

加载中

status=loading 时显示加载动画和提示文字。

查看源码

<template>
    <ux-loadmore status="loading" />
</template>

没有更多

status=nomore 时显示没有更多数据提示。

查看源码

<template>
    <ux-loadmore status="nomore" />
</template>

粗点样式

is-dot=true 时没有更多状态显示为一个圆点。

查看源码

<template>
    <ux-loadmore status="nomore" :is-dot="true" />
</template>

自定义颜色

通过 color 和 icon-color 自定义文字和图标颜色。

查看源码

<template>
    <ux-loadmore status="loading" color="#fa3534" icon-color="#fa3534" />
</template>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
bgColor	组件背景色	string	''	-
icon	是否显示加载中的图标（默认true）	boolean	true	-
fontSize	字体大小	string	'14'	-
color	字体颜色	string	''	-
status	组件状态，loadmore-加载前，loading-加载中，nomore-没有更多（默认loadmore）	string	'loadmore'	-
iconType	加载中状态的图标，flower-花朵状，circle-圆圈状（默认circle）	string	'circle'	-
loadText	显示的文字	LoadmoreText	-	-
isDot	在"没有更多"状态下，是否显示粗点（默认false）	boolean	false	-
iconColor	加载中显示圆圈动画时，动画的颜色	string	''	-
marginTop	上边距	number | string	0	-
marginBottom	下边距	number | string	0	-
height	高度，单位px	number | string	'auto'	-

Events

事件名	说明	回调参数	版本
loadmore	status为loadmore时，点击组件会发出此事件	-	-

Slots

ux-loadmore 无插槽。

注意事项

1. 只有 status="loadmore" 时点击才会派发 loadmore 事件；且点击事件绑定在文字上，点两侧分隔线或图标区域不会触发。
2. load-text 为部分覆盖：只有非空字段才覆盖对应文案（loadmore / loading / nomore），其余回落到组件内置 i18n 文案。
3. icon 只控制 loading 状态是否显示加载图标；icon-type（circle / flower）也只在 loading 态生效。
4. is-dot 只在 nomore 状态下把文字替换为「●」，其余状态不受影响。
5. loadmore / nomore 状态会在文字两侧渲染 ux-line 分隔线，loading 状态不显示分隔线。
6. margin-top / margin-bottom / height 传数值按 px 处理（内部走 addUnit），height 传 'auto' 表示高度自适应。
7. 组件无插槽，除 loadmore 外无其它事件。