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

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

基本使用

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

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

<template>
	<view class="wrap">
		<view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
			{{'第' + item + '条数据'}}
		</view>
		<un-loadmore :status="status" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const status = ref('loadmore')
	const list = ref<number>(15)
	const page = ref<number>(0)
	
	// 在真实项目中，这里会在页面的onReachBottom生命周期中处理
	const loadMoreData = () => {
		if(page.value >= 3) return 
		status.value = 'loading'
		page.value = page.value + 1
		setTimeout(() => {
			list.value += 10
			if(page.value >= 3) status.value = 'nomore'
			else status.value = 'loading'
		}, 2000)
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}
	
	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
</style>

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

• 如果不需要图标，可以设置icon为false
• 可以设置is-dot为true，在没有数据时，内容显示为一个"●"替代默认的"没有更多了"
• 可以通过配置loadingText配置提示的文字，见如下：

<template>
	<un-loadmore 
        :status="status" 
        :loadingText="loadingText" 
        :loadmoreText="loadmoreText" 
        :nomoreText="nomoreText" 
    />
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const status = ref('loadmore')
	const loadingText = ref('努力加载中')
	const loadmoreText = ref('轻轻上拉')
	const nomoreText = ref('实在没有了')
</script>

线条自定义颜色和设置为虚线 2.0.32

• 可以通过配置dashed和lineColor实现，见如下：

<template>
	<un-loadmore 
				loadmoreText="看,我和别人不一样"
				color="#1CD29B"
				lineColor="#1CD29B"
				dashed
				line
    />
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const status = ref('loadmore')
	const loadingText = ref('努力加载中')
	const loadmoreText = ref('轻轻上拉')
	const nomoreText = ref('实在没有了')
</script>

手动触发加载更多

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

API

Props

参数	说明	类型	默认值
status	组件状态	Enum	loadmore
bgColor	组件背景颜色，在页面是非白色时会用到(默认为transparent)	string	transparent
icon	加载中时是否显示图标	boolean	true
fontSize	字体大小，单位rpx	string | number	14
iconSize	图标大小，单位px	string | number	17
color	字体颜色	string	#606266
loadingIcon	加载中状态的图标	Enum	spinner
loadmoreText	加载前的提示语	string	加载更多
loadingText	加载中提示语	string	正在加载...
nomoreText	没有更多的提示语	string	没有更多了
isDot	status为nomore时，内容显示为一个"●"	boolean	false
iconColor	加载中的动画图标的颜色	string	#b7b7b7
lineColor	线条颜色	string	#E6E8EB
dashed	是否虚线，false-实线，true-虚线	boolean	false
marginTop	与前一个元素的距离，单位rpx	string | number	10
marginBottom	与后一个元素的距离，单位rpx	string | number	10
height	高度	string | number	auto
line	是否显示左边分割线	boolean	false

Events

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

Scss 变量

变量名	默认值	说明
$un-loadmore-margin	10px 0	加载更多组件外边距
$un-loadmore-content-margin	0 15px	加载更多内容外边距
$un-loadmore-icon-wrap-margin-right	8px	加载更多图标包装器右边距
$un-loadmore-text-font-size	$text-sm	加载更多文字大小
$un-loadmore-text-color	$text-color	加载更多文字颜色
$un-loadmore-dot-text-color	$text-color-muted	加载更多圆点文字颜色

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档