Loadmore

17:06

Description

A loading-state indicator for the bottom of a page, offering three states: loadmore (before loading, tappable), loading (loading) and nomore (no more data). The loadmore / nomore states render divider lines on both sides of the text; text, colors and the loading icon type are all configurable.

Compatibility

Platform	Support
App	✅ Supported (the flower icon of the loading state inherits from ux-loading and renders as a solid dot on App)
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Load More

When status=loadmore, clicking triggers the loadmore event.

View source

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

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

Loading

When status=loading, shows loading animation and text.

View source

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

No More

When status=nomore, shows no more data message.

View source

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

Dot Style

When is-dot=true, nomore state shows a dot.

View source

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

Custom Color

Customize text and icon color via color and icon-color.

View source

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

API

Props

Property	Description	Type	Default	Version
customStyle	Custom root element style	UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
bgColor	Component background color	string	''	-
icon	Whether to show the loading icon (default true)	boolean	true	-
fontSize	Font size	string	'14'	-
color	Font color	string	''	-
status	Component state: loadmore – before loading, loading – loading, nomore – no more (default loadmore)	string	'loadmore'	-
iconType	Icon of the loading state: flower – flower-shaped, circle – ring-shaped (default circle)	string	'circle'	-
loadText	Text to display	LoadmoreText	-	-
isDot	Whether to show a dot in the "no more" state (default false)	boolean	false	-
iconColor	Color of the spinning animation shown while loading	string	''	-
marginTop	Top margin	number | string	0	-
marginBottom	Bottom margin	number | string	0	-
height	Height, in px	number | string	'auto'	-

Events

Event	Description	Params	Version
loadmore	Emitted when the component is tapped while status is loadmore	-	-

Slots

ux-loadmore has no slots.

Notes

1. The loadmore event is emitted only when status="loadmore"; moreover the click handler is bound to the text, so tapping the side dividers or the icon area does not trigger it.
2. load-text overrides only partially: just the non-empty fields (loadmore / loading / nomore) replace the corresponding copy, and the rest falls back to the component's built-in i18n text.
3. icon only controls whether the loading icon appears in the loading state; icon-type (circle / flower) is likewise effective only in the loading state.
4. is-dot replaces the text with "●" only in the nomore state and leaves other states untouched.
5. The loadmore / nomore states render ux-line dividers on both sides of the text, while the loading state shows no dividers.
6. margin-top / margin-bottom / height treat numeric values as px (run through addUnit); height: 'auto' means the height adapts to the content.
7. The component has no slots and no events other than loadmore.