component name: uni-load-more

Code block: uLoadMore

Click to download & install

Used in lists, used for scroll loading, and displayed various states of loading.

# introduce

# Basic usage

<uni-load-more status="more"></uni-load-more>


# LoadMore Props

property name type optional value default value description
iconSize Number - 24 Specify icon size
status String more/loading/noMore more loading status
showIcon Boolean - true whether to show the loading icon
showText Boolean - true **[New in 1.3.3]**Whether to display text
iconType String snow/circle/auto auto Specify icon style
color String - #777777 Icon and text color
contentText Object - {contentdown: "Pull up to show more",contentrefresh: "Loading...",contentnomore: "No more data"} Text description of each state

# Status Options

Parameter name Description
more Before Loading
loading Loading
no-more No more data

# IconType Options

Parameter name Description
snow ios snowflake loading style
circle Android Ring Loading Style
auto Automatically select loading styles based on platform


When iconType is snow, the size cannot be set on the APP-NVUE platform, and the color cannot be set on the non-APP-NVUE platform

# LoadMore Events

Event Name Description Return Value
clickLoadMore triggered when click to load more e.detail={status:'loading'}

# Example


The example relies on multiple components such as uni-card uni-section uni-scss, copying the example code directly will not work properly.

Please go to the Component download page , select Import sample project using HBuilderX on the right side of the page to experience the complete component example.




	<view class="container">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">加载更多组件用于页面加载更多数据时,页面底部显示内容等场景</text>
		<uni-section title="基本用法" type="line">
			<uni-load-more :status="status" />
		<uni-section title="修改默认文字" type="line">
			<uni-load-more :status="status" :content-text="contentText" />
		<uni-section title="改变颜色" type="line">
			<uni-load-more color="#007AFF" :status="status" />
		<uni-section title="指定加载图标样式 - 按平台自动选择样式" type="line">
			<uni-load-more iconType="auto" :status="status" />
		<uni-section title="指定加载图标样式 - 环形" type="line">
			<uni-load-more iconType="circle" :status="status" />

		<uni-section title="改变组件状态" type="line">
			<radio-group class="uni-list" @change="onChange">
				<view v-for="(item, index) in statusTypes" :key="index" class="uni-list-item">
					<view class="uni-list-item__container">
						<view class="uni-list-item__content">
							<text class="uni-list-item__content-title">{{ item.text }}</text>
						<view class="uni-list-item__extra">
							<radio :value="item.value" :checked="item.checked" />


Complete example demo