# LoadMore 加载更多

概述

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

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiLoadmore from "@/components/firstui/fui-loadmore/fui-loadmore.vue"
export default {
	components:{
		fuiLoadmore
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

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

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

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用
<fui-loadmore></fui-loadmore>
1
修改颜色

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

<fui-loadmore activeColor="#FFB703"></fui-loadmore>
1
自定义图标

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

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

# Slots

插槽名称 说明
- -

# Props

属性名 类型 说明 默认值 平台差异说明
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图标高亮部分颜色 #465CFF 非nvue端默认值为空,css变量生效
iconWidth Number, String loading 图标的宽度,单位rpx 28 nvue端默认值为32
src String 自定义loading图标image路径,若自定义图标则iconColor、activeColor属性失效 - -
direction String loading图标和文字排列方向,可取值:col,row row -

# Events

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

示例预览

# 示例代码地址

FirstUILoadMore 加载更多
Last Updated: 9/29/2022, 1:07:59 AM