先看 通用。同类：基础 · 表单 · 导航 · 展示 · 反馈 · 布局

导航

页内切换、导航栏、侧边栏、步骤、分页符和底部菜单。

Tabs 选项卡

页内选项卡，和底部 Tab 不是一回事。底部菜单见 TabBar。

name 对应 data 中的键。items（或 options）为选项；选项里的 children 是该面板内容。onChange 的 e.value 为当前值。

参数名	类型	说明
name / id	String	对应 data 中的键
value	String	默认选中项
items / options	Array	{ text, value, badge, children }。text 也可用 label
onChange	String	切换时调用的 Page 方法
style.color / selectedColor	String	选中文字和下划线颜色。不写则跟 window.theme.primary

{ "type": "tabs", "name": "tab_blue", "value": "a", "style": { "color": "#1565C0" }, "items": [{ "text": "蓝色", "value": "a" }, { "text": "对照", "value": "b" }] }

Segmented 分段控制器

同一行里切换几个互斥选项，比 Tabs 更紧凑，不带面板内容。

参数名	类型	说明
name	String	对应 data 中的键
value	String	当前选中项
options / items	Array	字符串，或 { label, value }。text 也可用
onChange	String	切换时调用，e.value 为当前值
style.color	String	选中段背景色。不写则跟 window.theme.primary

{
  "type": "segmented",
  "name": "range",
  "value": "day",
  "options": [
    { "label": "日", "value": "day" },
    { "label": "周", "value": "week" },
    { "label": "月", "value": "month" }
  ]
}

{ "type": "segmented", "name": "tone", "value": "blue", "style": { "color": "#1565C0" }, "options": [{ "label": "蓝", "value": "blue" }, { "label": "对照", "value": "other" }] }

NavBar 导航栏

页内导航栏，不是页面 JSON 根上的 title。适合 title.hidden: true 时自己画返回和标题。页面 style.padding 写成 0，导航栏就会贴着内容区顶端。

参数名	类型	说明
title / text	String	中间标题
leftText / left	String	左侧文案，默认 返回
leftColor / iconColor / style.color	String	左侧返回图标和文案颜色，默认主题绿 #006A65
iconSize	Number	返回图标边长 dp，默认 32，与系统顶栏返回图标一致。也可写在 style.iconSize
rightText / right	String	右侧文案，不写则不显示
onLeft	String	左侧点击。不写则 back()
onRight	String	右侧点击

{ "type": "navBar", "title": "详情", "leftText": "返回", "rightText": "更多", "onRight": "onMore" }

{ "type": "navBar", "title": "详情", "leftText": "返回", "leftColor": "#191C1C" }

{ "type": "navBar", "title": "蓝色返回", "leftText": "返回", "rightText": "更多", "style": { "color": "#1565C0" } }

SideBar 侧边导航

左侧分类轨。和右侧内容用 Row 并排，页面 padding 写成 0，侧栏才会贴左（或贴右）。name 对应 data 中的键。

参数名	类型	说明
name	String	对应 data 中的键
value	String	当前选中项
items / options	Array	{ text, value } 或字符串
onChange	String	切换时调用，e.value 为当前值
style.width	Number	轨宽 dp，默认 88
style.color	String	选中项颜色。不写则跟 window.theme.primary

{
  "type": "sideBar",
  "name": "cat",
  "value": "follow",
  "style": { "color": "#1565C0" },
  "items": [
    { "text": "关注", "value": "follow" },
    { "text": "点赞", "value": "like" }
  ]
}

IndexBar 序列

通讯录式列表，右侧字母轨悬浮在列表之上，列表铺满宽度。滚动发生在列表内部，不会带动整页。数据是扁平数组时用 indexKey（默认 letter）分组；也可以写成 { index, children }。

参数名	类型	说明
bind	String	数据路径，对应 data 中的数组
indexKey	String	分组字段，默认 letter
item	Object	每一项的组件模板
items	Array	未写 bind 时的静态数据
railMargin	Number	字母轨距右边缘的 dp，默认 6。也可写 style.marginRight / style.right
style.color	String	当前字母高亮色。不写则跟 window.theme.primary

{
  "type": "indexBar",
  "bind": "contacts",
  "indexKey": "letter",
  "railMargin": 6,
  "item": { "type": "text", "text": "{{item.name}}" }
}

Steps 步骤条

展示当前走到第几步。value 为下标，从 0 开始。

参数名	类型	说明
name	String	对应 data 中的键
value	Number	当前步骤下标，从 0 开始
items / options	Array	步骤文案，字符串或 { text }
direction	String	row（默认）横排；column / vertical 竖排
onChange	String	值变化时调用（一般用按钮改 setData）
style.color	String	已完成步骤颜色。不写则跟 window.theme.primary

{
  "type": "steps",
  "name": "step",
  "value": 1,
  "items": [{ "text": "提交" }, { "text": "审核" }, { "text": "完成" }]
}

{ "type": "steps", "name": "tone", "value": 1, "style": { "color": "#1565C0" }, "items": [{ "text": "提交" }, { "text": "审核" }, { "text": "完成" }] }

PageIndicator 分页符

一排或一列圆点 / 短条，表示当前页。可和走马灯分开用，点选会改 value（从 0 起）。

参数名	类型	说明
name	String	对应 data 中的键
count	Number	点数
value	Number	当前下标，从 0 起
variant	String	dot（默认）/ line 短条
direction	String	row（默认）横排；column / vertical 竖排
onChange	String	点选后调用，e.value 为下标
style.color	String	当前点 / 短条颜色。不写则跟 window.theme.primary

{ "type": "pageIndicator", "name": "page", "count": 5, "value": 1 }

{ "type": "pageIndicator", "name": "blue_page", "count": 5, "value": 2, "style": { "color": "#1565C0" } }

{ "type": "pageIndicator", "name": "page", "count": 5, "direction": "column" }

TabBar 底部菜单

不是 body 里的 type。写在入口 deekeScript.json 的 bottomMenus，颜色写在 window.tabBar。配置、setTabBar 和运行时改角标见 底部菜单。