LoadMore 加载更多 V1.1.0+

概述

LoadMore 加载更多，主要使用场景如：上拉加载等。

温馨提示

• 该组件内置了国际化配置，使用该组件，必须同时引入 fui-lang 所有文件。

支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiLoadmore from "@/components/firstui/fui-loadmore/fui-loadmore.uvue"
export default {
	components:{
		fuiLoadmore
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

<fui-loadmore></fui-loadmore>

修改颜色

通过 activeColor 属性修改loading图标高亮部分颜色。

<fui-loadmore activeColor="#FFB703"></fui-loadmore>

自定义图标

通过 src 属性设置图标图片地址，iconWidth 属性设置图标宽度，text 属性设置提示文本。

<fui-loadmore src="/static/images/component/loading_gray.png" :iconWidth="36" text="加载中...">
</fui-loadmore>

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
height	Number	组件占据高度，单位rpx	100	-
state	Number	状态，可选值：1-上拉加载 2-正在加载... 3-没有更多了	2	-
initText	String	状态1提示文字	上拉加载	-
text	String	状态2提示文字	正在加载...	-
noneText	String	状态3提示文字	没有更多了	-
color	String	提示文字颜色	#7F7F7F	-
size	Number	提示文字大小，单位rpx	24	-
iconColor	String	loading图标圆环背景色	#B2B2B2	-
activeColor	String	loading图标高亮部分颜色	#465CFF	-
iconWidth	Number	loading 图标的宽度，单位rpx	32	-
src	String	自定义loading图标image路径，若自定义图标则iconColor、activeColor属性失效	-	-
direction	String	loading图标和文字排列方向，可取值：col，row	row	-

Events

事件名	类型	说明	回调参数
-	-	-	-

示例预览

示例代码地址

LoadMore 加载更多