# LoadMore 加载更多

概述

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

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

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "加载更多",
  "usingComponents": {
    "fui-loadmore": "/components/firstui/fui-loadmore/fui-loadmore"
  }
}

1
2
3
4
5
6

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-loadmore": "components/firstui/fui-loadmore/fui-loadmore"
}

1
2
3

部分示例演示，完整使用请参考示例程序以及文档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>

插槽名称	说明
-	-

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

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