n-page 页面骨架
主体滚动区 + 底部常驻操作栏，同时就是页面包装层（根节点自动挂 n-theme-light / n-theme-dark 主题类，CSS 变量沿树继承给内部全部 newui 组件与插槽内容）。适用于表单提交页、商品详情页、列表筛选页等"内容可滚动 + 底部常驻操作栏"的场景。
- 零配置：放进去就行。底栏 fixed 钉屏幕底部、自动垫底部安全区，组件自动测量底栏高度并在主体底部预留等高空间，内容不被遮挡
- 页面保持原生滚动（性能最优，onReachBottom 等页面事件正常）：内容超出视口自动可滚（根节点 grow 撑满短屏 / 不压缩长内容），无需包滚动容器
- 主题自带：根节点自动挂主题类，页面无需再包一层主题 view；切换用 useTheme().setMode("light" | "dark" | "system")；局部换肤可用 n-theme-provider 的 custom-style 覆盖令牌
- 底栏与内容区的分界为上投影（非边框线）；投影色令牌 --n-page-footer-shadow-color 可主题覆盖，要改回边框线用 footer-style 覆盖 box-shadow 并补 border-top 三件套
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
根节点与主体默认 overflow:visible，可承载原生 sticky 和跨出内容边界的插槽；需要裁剪的区域应由调用方自己的内容容器承担。
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| custom-class | 根节点自定义类（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式 | String | "" | 与 css 相同 |
| body-style | 主体滚动区行内样式（设背景色等） | String | "" | 与 css 相同 |
| footer-style | 底栏行内样式（变化后组件自动重测底栏高度） | String | "" | 与 css 相同 |
| safe-area | 底部安全区自动垫层（读系统 safeAreaInsets，仅小白条/手势条机型有值，其余机型为 0 不生效）：有底栏时垫在底栏内容下方，无底栏时垫在主体末尾；关闭后贴屏幕底缘，用于已自行处理安全区或沉浸式贴底场景 | Boolean | true | - |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 页面主体（常规文档流，底部自动预留底栏等高空间） |
| footer | 底部常驻操作栏（fixed 钉底，自动垫底部安全区） |
方法
通过 ref 调用：
| 方法名 | 说明 |
|---|---|
| resize() | 立即重测底栏高度的兼容入口；组件已自动跟随底栏尺寸，无需在内容变化后调用 |
实现说明
底栏布局采用内部尺寸监听：App / Web 使用元素尺寸观察器，小程序由库内共享时钟检测；与挂载测量机制相比，异步内容与布局变化也自动更新占位。页面隐藏停止监听，恢复后重测，卸载释放；resize() 保留为立即重测入口。
机制对照（与同类页面容器参考并集逐机制核对）
| 机制 | 参考做法 | 本库做法 | 分歧理由 |
|---|---|---|---|
| 主体滚动承载 | 一参考 App 端以 scroll-view 为根接管滚动，另提供 scrollTo/scrollToTop/scrollTop 实例方法操作容器；其余参考为文档流 | 页面保持原生滚动，不包滚动容器；滚回顶部直接用平台 uni.pageScrollTo | 原生滚动性能最优且页面事件（onReachBottom / onPageScroll）全量正常；接管滚动就必须自带一套滚动方法与状态上报，使用者还要学组件 API 才能滚动——平台能力已覆盖，不重复包装 |
| 内置回到顶部 | 一参考提供 backTop 开关在页面容器内挂载回顶按钮 | 不内置；独立回顶组件支持 scrollTop=null 自动监听页面滚动，且位于本组件内时自动避开底栏（读取底栏实际高度） | 回顶是独立能力（形状 / 文字 / 受控滚动值 / 阈值），收进页面骨架只能做成开关退化形态；避让由两组件内部通道完成，使用者零接线 |
| 页面背景色 | 一参考提供 bgColor 专用属性 | customStyle / bodyStyle 行内样式通道（背景色只是 CSS 的一种） | 专用属性是窄通道（只能改背景色）；行内通道可设任意声明（背景、圆角、内边距），且与全库定制三通道一致 |
| 主题变量注入 | 一参考提供 theme / themeVars 属性在页面容器上注入局部主题变量 | 根节点自动挂全局主题类（跟随 useTheme 三态）；局部深色域用独立主题容器组件包裹 | 全局主题是单例（setMode 即时生效、持久化），不需要每页传值；局部主题域是独立场景，由专门组件承担 |
| 主体/底栏样式类 | 一参考提供 bodyClass / footerClass 类数组属性 | bodyStyle / footerStyle 行内样式属性 | 样式隔离下页面定义的类打不进组件内部节点，类属性形同虚设；行内样式是隔离环境下唯一可靠直达通道 |
| body 内底部插槽 | 一参考提供 bottom 插槽（主体末尾、底栏之上的内容） | 不设；内容直接放 default 插槽末尾即同位置 | bottom 插槽与 default 末尾在布局上完全等价，多一个插槽徒增认知 |
| 底栏测高开关 | 一参考提供 autoFooter 开关（关闭后手动写死占位） | 恒自动：实时测量底栏实际高度（含安全区）并在主体底部预留 | 自动测量无失效场景，开关只会引入"忘了开导致内容被遮"的坑；异步内容（图片加载、文案换行）也自动跟随 |
| 主体与底栏间距 | 一参考提供 bodyBottom 间距属性（默认约 5px） | 固定 10px 呼吸间距；需要更大间距用 footer-style 加 padding-top（底栏变高、占位自动跟随） | 间距是版式常量而非高频定制项；真要调整时通过既有通道即可，不必单设属性 |