n-tabs 标签页
横向标签栏：点击切换当前项，下划线 / 滑块指示条随选中项平滑移动（选中文字默认不放大，可经 activeScale 开启放大高亮）；标签超宽时横向滚动，选中项自动滚到可视区中部。数据驱动（list），值绑定 modelValue——item.value 缺省时以数组下标为值，纯文字列表直接用下标取值即可。
- 指示条位置由渲染后测量得出：
list/fill/center变化与窗口尺寸变化后自动重测；指示条移动与文字缩放带过渡（duration，毫秒，0 为无动画）slider开启后为滑块形态（激活项整块圆角底色、文字反白，默认 8px 小圆角），此时下划线不再显示（showLine被忽略）modelValue按项值匹配（item.value缺省即下标），匹配不到时回落第一项显示；列表内值请保持同类型（数字或字符串），混合类型不互通- 角标绝对定位于标签文字右上（脱流不参与布局，不扰文字/图标/指示条居中）：位置与大小固定、不随内容宽 / 形态变化——徽标悬于文字行上方带，多宽（如 99+）都不遮字、不侵相邻项。数字 ≤0 不显示、>99 显示 "99+"，字符串原样显示，
badge: true显示为红点；#item 插槽项的角标仍按item.badge自动渲染，无需插槽自绘。数字角标出现时条顶部自动预留徽标带（各项整体下移数 px，使上探的角标完整落在滚动区内——滚动容器必裁越界内容），无角标与纯红点列表不受影响iconPosition传"top"时图标在文字上方竖排（底部导航式标签）；文字字重与角标配色可经主题令牌覆盖（--n-tabs-label-weight(-active)/--n-tabs-badge-bg/--n-tabs-badge-text-color）
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| list | 标签数据源（label / value / disabled / badge / icon / activeIcon）；列表内 value 需唯一 | Array<NTabsItem> | [] | - |
| model-value | 当前选中项的值（按 item.value 匹配，缺省值即下标；匹配不到回落第一项显示） | String | Number | 0 | - |
| height | 标签栏高度（px） | Number | 44 | - |
| fill | 等分铺满：标签平分整行宽度（适合少量标签），超出可容宽度时按内容宽排列并保持可横滚；false 按内容宽度排列，超宽横向滚动 | Boolean | false | - |
| center | 标签组整体居中：各项保持内容宽、整组在行内居中排列；标签总宽超出行宽时退化为左对齐可横滚；fill 开启时本项被忽略 | Boolean | false | - |
| icon-position | 图标与文字的排布：left 图标在文字左侧同排；top 图标在文字上方竖排（底部导航式标签，配 item.icon / item.activeIcon 使用） | String | "left" | left / top |
| slider | 滑块形态：激活项整块胶囊底色（激活文字转白色，下划线不再显示） | Boolean | false | - |
| show-line | 显示下划线指示条（slider 开启时忽略本项） | Boolean | true | - |
| line-width | 下划线宽度（px）；传 0 表示跟随标签项整项宽度 | Number | 20 | - |
| line-height | 下划线厚度（px） | Number | 3 | - |
| line-bottom | 下划线距内容条底缘的距离（px，仅线形态生效） | Number | 0 | - |
| slider-padding | 滑块形态下胶囊向两侧外扩的距离（px），使滑块宽于标签项 | Number | 0 | - |
| duration | 指示条移动与文字缩放的过渡时长（毫秒），0 为无动画 | Number | 300 | - |
| active-scale | 选中文字放大倍数（transform 缩放不参与布局），1 为不放大（默认不放大，需要放大高亮时传 1.2） | Number | 1 | - |
| color | 激活色：选中文字与指示条的颜色（含 slider 底色）；指示条支持 linear-gradient(...) 渐变串；空串取品牌色主题令牌 | String | "" | 与 css 相同 |
| inactive-color | 未选中文字颜色；空串取主题文字令牌 | String | "" | - |
| background | 栏体底色：空串常态透明（随页面背景）、fixed 吸顶时取主题面底色防内容透出；传色值行内覆盖，支持 linear-gradient(...) 渐变串 | String | "" | 与 css 相同 |
| fixed | 吸顶固定：标签栏钉在视口顶部（根节点保留占位高度，页面内容不塌陷） | Boolean | false | - |
| offset-top | fixed 开启时标签栏距视口顶部的距离（px） | Number | 0 | - |
| immediate | 挂载完成后立即补发一次 change（参数为当前选中项）；默认不发，避免与页面初始化逻辑双触发 | Boolean | false | - |
| disabled | 整体禁用：保色相降透明，点击与长按全部拦截 | Boolean | false | - |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式，如 "background-color:#ffffff" | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:model-value | 选中项变化时触发；配合 :model-value 手动双向绑定 | 选中项的值（item.value 缺省时为其下标） |
| change | 选中项变化时触发；点已选中项与禁用项不触发 | NTabsEventDetail：{ item, index }（触发项数据与下标） |
| click | 点击可交互标签项时触发（已选中项也触发） | NTabsEventDetail： |
| longPress | 长按标签项时触发（禁用项不触发） | NTabsEventDetail： |
插槽
| 插槽名 | 说明 |
|---|---|
| item | 自定义标签项内容（作用域插槽，参数 item / index / active）；label 置空串的项由本插槽渲染；插槽只接管图标与文字，角标仍按 item.badge 自动渲染 |
| right | 固定右侧区：钉在标签栏右端、不随标签滚动，常放频道管理 / 筛选入口按钮；内容与间距由插槽自带 |
实现说明（参考做法对照）
| 机制 | 参考做法 | 本组件 | 分歧理由 |
|---|---|---|---|
| 数据模型 | 对象数组（label/name + value + disabled）；一参考支持 nameKey/badgeKey/disabledKey 字段映射与字符串数组简写 | list 数组驱动固定字段（label / value / disabled / badge / icon / activeIcon），label 置空串的项走 #item 插槽 | UTS 类型化数据契约（NTabsItem）优先；字段名映射可由调用方 map 一步达成，项内容自由度由作用域插槽承担 |
| 选中值 | 纯下标或按 name/value 匹配并存 | modelValue 按 item.value 匹配，缺省以数组下标为值，匹配不到回落第一项显示 | 字符串与数字皆可作项标识，纯文字列表免写 value；回落保证初始渲染不空挂 |
| 指示条形态 | 下划线（宽度 / 厚度 / 距底可调）与整项底色滑块两类；一参考用 base64 背景图实现渐变下划线，另一参考滑块固定短长度 | slider（整项圆角块 + 文字反白）与下划线（lineWidth 传 0 = 整项宽）双形态；color 直接支持 linear-gradient(...) 渐变串 | 渐变走 CSS 原生能力，不引入图片资源；固定短长度由 lineWidth 数值自由表达 |
| 激活色 | 一色统管（激活色 + 未选中色）与文字 / 指示条分离取色两种流派 | color 一色统管选中文字、图标、指示条与滑块底色；inactiveColor 管未选中；独立指示条色不单设 prop | 单一激活色是主流视觉语义，分离取色属低频；空串回落主题令牌保住全局换肤 |
| 文字样式 | 样式串（activeStyle / inactiveStyle / itemStyle）或字重字号 props | 字号、双档字重走主题令牌（--n-tabs-font-size / --n-tabs-label-weight(-active)），颜色与缩放走 props（color / inactiveColor / activeScale） | 主题令牌是全局风格首选通道；样式串 prop 在类型化契约下弱化，项内边距令牌（--n-tabs-item-padding-x）承担项间距 |
| 选中放大 | 一参考默认放大 1.2 倍，另一参考经样式串 transform 表达 | activeScale 默认 1（不放大），需要放大高亮显式传 | 放大是强调型视觉，默认克制；transform 缩放不参与布局，放大不挤压相邻项 |
| 布局档 | 数据不满一屏时均分铺满（可关）或恒内容宽 + 可滚开关（scrollable） | fill 等分铺满（超量退化为内容宽排列保持可滚）与默认内容宽排列（超宽横滚）双档，center 整组居中为第三形态 | 等分铺满即「禁滚」的主流形态，与可滚档互斥清晰；居中形态补足少量标签排版 |
| 滚动锚定 | 选中项滚到可视区中部，或锚到选中项的前一项 | 选中项中心对齐滚动视口中心（计算 scroll-left，带过渡），钳在可滚动范围内 | 居中锚定对任意项位置的可见性最优；像素级 scroll-left 跨端行为一致 |
| 角标 | 数字 / 字符串徽标 + 独立红点开关（dot）+ 零值显示开关 + 每项底色 / 类型 / 偏移定制 | badge 单字段三态：数字（≤0 不显示、>99 显 "99+"）、字符串原样、true 为红点；角标位置固定悬于文字行上方带，全局配色走令牌 | 三态字段覆盖 dot 与文字徽标并集；零值不显是未读数主流语义；每项独立角标配色低频（全局色可经令牌调整） |
| 图标 | 图片地址对（icon / selectedIcon）+ 横竖排开关 | 图标名 prop（icon / activeIcon，内置图标字体），iconPosition 控横竖排；图片图标走 #item 插槽 | 库内图标统一字体通道（n-icon）；命名 prop 是图标族已确认的便捷例外，插槽保底全定制 |
| 吸顶 | 组件自带 fixed + 吸顶开关 + 层级 / 距顶 props，或外包粘性定位组件组合 | fixed + offsetTop + 根节点自动占位（页面内容不塌陷），层级走令牌；页面级「滚到顶吸住」在 readme 给 onPageScroll 接法 | uni-app x 无 CSS sticky，fixed + 占位是防塌陷的最短链路；组合式（外包滚动容器）兼容 |
| 事件 | change / click / longPress 各家子集，change 点已选中项不触发 | 四通道全并集：update:modelValue（值）、change / click / longPress（{ item, index } 载荷），click 已选中项也触发 | 受控值通道与语义事件分离（本库 v-model 统一约定）；载荷带原始数据项免查表 |
| immediate | 一参考语义为「跳过首次动画」（默认跳过） | 语义为挂载后补发一次 change（默认不发）；指示条首挂恒直落定位（不经动画） | 面向首屏按选中页拉数据的初始化场景；动画直落即默认视觉，无需开关 |
| 测量链 | 挂载与 list 变化后测量选中项几何 | 挂载、list 深度变化（角标等元素级更新同样改项宽）、fill / center / iconPosition 切换、窗口尺寸变化均重测；几何以内容条左缘为原点的「内容坐标」表达，跨滚动状态稳定 | 元素级更新的重测是指示条跟随的必要条件；内容坐标使测得结果在滚动前后可复用 |