uv-ui

# LoadMore 加载更多

✈

组件名：uv-load-more

点击下载&安装 (opens new window)

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

  • loadmore 加载前，显示“加载更多”。该状态下提供点击回调@loadmore，在数据不够一页时，无法触发页面的onReachBottom生命周期，可使用该回调进行下一步操作
  • loading 加载中，显示“正在加载...”
  • 加载后，如果还有数据，回到“加载前”loadmore状态，否则加载结束，显示“没有更多了”nomore状态

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

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

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

<template>
	<view class="wrap">
		<view class="item uv-border-bottom" v-for="(item, index) in list" :key="index">{{'第' + item + '条数据'}}</view>
		<uv-load-more :status="status" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				list: 15,
				page: 0
			}
		},
		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.list += 10;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}
	.item {
		padding: 24rpx 0;
		color: #222;
		font-size: 28rpx;
	}
</style>

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

  • 设置loadmore-text属性配置加载前提示的文字；设置loading-text属性配置加载中提示的文字；设置nomore-text属性配置无数据提示的文字
  • 设置:is-dot="true"，在没有数据时，内容显示为一个“●”替代默认的“没有更多了”
<template>
	<uv-load-more :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
</template>
<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			}
		}
	}
</script>

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

设置dashed和lineColor属性实现，见如下：

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

# 手动触发加载更多

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

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# LoadMore Props

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

# LoadMore Events

事件名 说明 回调参数
@loadmore status为loadmore时，点击组件触发 -

← Empty 内容为空 →