# LoadMore 加载更多

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

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

# 平台差异说明

App(vue) App(nvue) H5 小程序

# 基本使用

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

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

<template>
	<view class="wrap">
		<view class="item up-border-bottom" v-for="(item, index) in list" :key="index">
			{{'第' + item + '条数据'}}
		</view>
		<up-loadmore :status="status" />
	</view>
</template>
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const status = ref('loadmore');  
const list = ref(15);  
const page = ref(0);  
  
// 定义方法  
function onReachBottom() {  
  if (page.value >= 3) return;  
  status.value = 'loading';  
  page.value++;  
  setTimeout(() => {  
    list.value += 10;  
    if (page.value >= 3) status.value = 'nomore';  
    else status.value = 'loading';  
  }, 2000);  
}  
</script>
<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: $up-content-color;
		font-size: 28rpx;
	}
</style>

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

  • 如果不需要图标,可以设置iconfalse
  • 可以设置is-dottrue,在没有数据时,内容显示为一个"●"替代默认的"没有更多了"
  • 可以通过配置loading-text配置提示的文字,该参数为一个对象值,可以修改默认的文字提示,见如下:
<template>
	<up-loadmore 
        :status="status" 
        :loading-text="loadingText" 
        :loadmore-text="loadmoreText" 
        :nomore-text="nomoreText" 
    />
</template>
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const status = ref('loadmore');  
const loadingText = ref('努力加载中');  
const loadmoreText = ref('轻轻上拉');  
const nomoreText = ref('实在没有了');  
</script>
<script>
	export default {
		data() {
			return {
				status: 'loadmore',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了'
			}
		}
	}
</script>

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

  • 可以通过配置dashedlineColor实现,见如下:
<template>
	<up-loadmore 
		loadmoreText="看,我和别人不一样"
		color="#1CD29B"
		lineColor="#1CD29B"
		dashed
		line
    />
</template>
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const status = ref('loadmore');  
const loadingText = ref('努力加载中');  
const loadmoreText = ref('轻轻上拉');  
const nomoreText = ref('实在没有了');  
</script>
<script>
	export default {
		data() {
			return {
				status: 'loadmore',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了'
			}
		}
	}
</script>

# 手动触发加载更多

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

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

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

# Event

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