主题
LoadMore 加载更多
展示上拉加载、加载中或没有更多数据的状态。
支持平台
以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 数据正在加载 -->
<fui-loadmore :state="2" />属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| height | Number / String | 组件高度,单位 rpx | 100 |
| state | Number / String | 1 上拉加载,2 加载中,3 没有更多 | 2 |
| initText | String | 状态 1 的提示文字 | 上拉加载 |
| text | String | 状态 2 的提示文字 | 正在加载... |
| noneText | String | 状态 3 的提示文字 | 没有更多了 |
| color | String | 提示文字颜色 | #7F7F7F |
| size | Number / String | 提示文字字号,单位 rpx | 24 |
| iconColor | String | 加载图标底色 | #B2B2B2 |
| activeColor | String | 加载图标高亮色 | #465CFF |
| iconWidth | Number / String | 加载图标宽度,单位 rpx | 28 |
| src | String | 自定义加载图片地址,使用后图标颜色属性不生效 | - |
| direction | String | 图标和文字排列方向:col 或 row | row |
平台说明
nvue 的 iconWidth 默认值为 32;非 nvue 的 activeColor 本地默认值为空,通过主题样式控制。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| — | 无自定义事件 | — |
请在页面滚动或列表触底事件中控制加载状态。
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |