n-loadmore 加载更多
列表底部的加载状态提示条，status 三态轮换：loadmore（显示"加载更多"，整条可点击请求下一页）/ loading（加载指示器 + 加载文案）/ nomore（"没有更多了"，可用极简圆点替代文字）。数据循环的常规接法：请求前置 loading，追加完置回 loadmore，没有下一页置 nomore；刷新或筛选后可重新开始。
只传 status 即可切换提示状态。line 默认关闭，开启后三态均显示两侧线条，dashed 与 lineColor 统一控制线形和颜色。direction 控制图标与文字横排或竖排，safeAreaBottom 按需处理底部安全区。组件不请求数据、不管理分页列表。
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
如何调用
html
<n-loadmore status="loading" />API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| status | 加载状态；非法值触发 error 并停止展示 | String | "loadmore" | loadmore / loading / nomore |
| direction | 图标与文字排列；两侧线条始终水平 | String | "row" | row / col |
| line | 三态均可显示两侧线条 | Boolean | false | - |
| dashed | line 开启时使用虚线 | Boolean | true | - |
| lineColor | 线条颜色，空则跟随主题 | String | "" | CSS 色值 |
| isDot | 结束态以圆点替代文字 | Boolean | false | - |
| icon | 加载态显示内置指示器，iconOnly 开启时不生效 | Boolean | true | - |
| iconMode | 复用 n-loading 的五种指示器形态 | String | "circle" | circle / semicircle / flower / dots / bars |
| iconSize | 内置指示器名义尺寸，px，有限正数；圆环/半弧/花瓣为直径，三点为组宽基准，竖条为高度；不控制插槽内容尺寸 | Number | 17 | - |
| iconColor | 指示器活动色，空则跟随主题品牌色 | String | "" | CSS 色值 |
| inactiveColor | circle 轨道色，空则跟随主题弱填充；transparent 关闭轨道 | String | "" | CSS 色值 |
| color | 文字颜色，空则跟随主题次级文字色 | String | "" | CSS 色值 |
| fontSize | 文字字号，px，有限正数 | Number | 14 | - |
| height | 内容高度，px，不含安全区；0 自适应，正数指定高度并移除上下内边距，默认最小 40px | Number | 0 | 有限非负数 |
| marginTop | 上外边距，px，允许负数 | Number | 0 | 有限数 |
| marginBottom | 下外边距，px，允许负数 | Number | 0 | 有限数 |
| safeAreaBottom | 内容下方追加底部安全区，已由页面处理时关闭 | Boolean | false | - |
| loadmoreText | 加载更多文案，空白则使用语言包 | String | "" | - |
| loadingText | 加载中文案，空白则使用语言包 | String | "" | - |
| nomoreText | 没有更多文案，空白则使用语言包 | String | "" | - |
| iconOnly | 加载态以默认插槽替代内置指示器 | Boolean | false | - |
| iconRotate | 旋转默认插槽，仅 iconOnly 开启时生效；动图可保持关闭 | Boolean | false | - |
| textStyle | 文字行内样式，最后应用，可覆盖字号、颜色和行高 | String | "" | - |
| customClass | 根节点类，须在组件样式表内定义 | String | "" | - |
| customStyle | 根节点行内样式，最后应用，可设置背景和外边距等 | String | "" | - |
事件
| 事件名 | 说明 |
|---|---|
| loadmore | 配置合法且 status 为 loadmore 时点击触发；加载中与结束态不触发 |
| error | 配置非法时触发，参数 NLoadmoreError：{prop: string, message: string}；停止展示与点击，修正后自动恢复 |
插槽
| 插槽名 | 说明 |
|---|---|
| default | iconOnly 开启后替代加载态指示器；插槽负责自身尺寸；iconRotate 可交由组件旋转，可放 n-icon 或 image |
样式令牌
| CSS 变量 | 默认值 | 作用 |
|---|---|---|
| --n-loadmore-min-height | 40px | 内容最小高度 |
| --n-loadmore-padding-y | 12px | 自适应高度时的上下内边距 |
| --n-loadmore-gap | 8px | 图文及线条与内容的间距 |
| --n-loadmore-dot-size | 6px | 结束态圆点直径 |
横排图文使用等高行盒；如通过 textStyle 修改字号，可同步设置 line-height，常规字号定制优先使用 fontSize。固定 height 应容纳实际内容；较大文字、竖排或自定义插槽建议保持 height=0。
实现说明
| 能力 | 常见做法 | 本组件做法与取舍 |
|---|---|---|
| 加载状态 | 双布尔或数字状态切换 | 使用 status 三态枚举，点击仅派发 loadmore；请求、列表追加和失败重试由业务控制 |
| 加载指示器 | 独立绘制圆环、区分轨道与活动色 | 复用 n-loading 全部五种形态与动画生命周期，iconColor 控制活动色，inactiveColor 控制圆环轨道色 |
| 排列方向 | 图标与文字横排或竖排 | direction 支持 row / col；两侧装饰线始终水平排列 |
| 底部安全区 | 按需在提示内容下预留安全区 | safeAreaBottom 默认关闭，使用库内安全区单例；已由页面处理时无需重复开启 |
| 提示装饰 | 文字、圆点、两侧虚实线 | line 与状态解耦，三态共用 dashed 和 lineColor；isDot 仅结束态替代文字，均由组件内部装配 |
| 自定义图标 | 图片地址或图标配置 | iconOnly 配合默认插槽，支持图片和 n-icon；iconRotate 复用 n-loading 的旋转与页面显隐启停，插槽只提供内容与尺寸 |
| 样式定制 | 专用背景属性或节点样式对象 | 背景由 customStyle 配置，内部文字由 textStyle 配置，符合全库定制通道 |
| 参数错误 | 默认值替代非法配置 | 非法状态、方向、形态和尺寸触发 error 并停止展示与点击；修正后自动恢复 |
| 动态结构 | 按状态增删节点 | 仅实际显隐或内容类型改变时重建内容行；当前状态无关的属性不会重建插槽 |
文字颜色默认由样式类读取主题令牌，保留运行时 CSS 变量、编译时 SCSS 覆盖和库默认值。textStyle 与 customStyle 最后应用，可覆盖组件默认样式；文字在横排指示器旁使用等高行盒。内容默认上下各留 12px、最小高度 40px，安全区高度额外追加在内容下方。组件不管理请求、翻页数据、自动加载或请求失败策略。