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

写在 list / grid 行内时，onChange 除了 e.value 还有 e.item、e.index。不限于 Switch：input / checkbox / radio / slider / stepper / select 等同样可以不写 name，靠这两项定位行。静态同名会自动加上 #下标。Switch 未写 value 时默认读 item.enabled。

表单

输入、搜索框、选择组、级联、日期时间选择器、选择器、步进器、评分、滑动条、图片上传。按钮见 Button。

Input 输入框

单行输入。name 对应 data 中的键，value 为默认值。name 也会做 {{path}} 替换，所以 list 里可以写 {{item.key}}。

默认是底部一条横线。需要网页式圆角边框时写 variant: "box"，或直接在 style 里写 radius / borderColor / borderWidth。无边框、只有背景写 variant: "plain"。铺满一行、不要左右外边距：不要放进带 padding 的卡片里，页面灰底上直接放白底输入框，hint: "请输入"。

密码框默认密文。加上 passwordToggle: true 后，引擎会在右侧画出眼睛：密文为闭眼，点一下变为睁眼并显示明文。图标由 Android 内置，工程里不用放图，也不用自己配右侧图标。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
value	String	默认值
hint	String	占位
password	Boolean	等价于 `inputType: password`
passwordToggle	Boolean	密码框自动在右侧显示眼睛：闭眼为密文，睁眼为明文。别名：`togglePassword`、`明文`、`可见`
inputType	String	`text`（默认）/ `password` / `number`（小数）/ `digit`（整数）/ `email` / `phone` / `url`。中文别名：`密码`、`数字`、`整数`、`邮箱`、`手机`、`网址`
variant	String	`line` / `下划线`（默认）；`box` / `边框` 为圆角边框；`plain` / `无边框` / `纯背景` 为无描边纯背景。别名：`outline`、`filled` 视为 box；`fill`、`soft` 视为 plain
size	String	仅 `box` / `plain` 生效。`sm` / `小` 高 40dp；`md`（默认）48dp；`lg` / `大` 56dp
style.radius	Number	边框圆角 dp；写出后自动切到边框样式。`sm` 默认 4，`md` 默认 6，`lg` 默认 8
style.borderWidth	Number	描边宽度 dp，默认 1
style.borderColor	String	描边颜色，默认 `#DAE5E3`
style.focusColor	String	聚焦时描边 / 下划线 / 光标颜色。不写则跟 `window.theme.primary`
style.cursorColor	String	光标颜色。不写则跟 `focusColor`
style.hintColor	String	占位文字颜色
style.background	String	输入区背景，默认 `#FFFFFF`
icon / prefixIcon	String	左侧图标，项目内图片或 `http(s)`。别名：`startIcon`、`prefix`、`前图标`
iconSize	Number	左侧图标边长 dp，默认 18。也可写在 `style.iconSize`
onChange	String	值变化时调用，`e.value` 是新值。写在 list / grid 行内时还有 `e.item`、`e.index`
onFocus / onBlur	String	获得 / 失去焦点

json

{ "type": "input", "name": "account", "label": "账号", "hint": "请输入账号" }

json

{
  "type": "input",
  "name": "task_name",
  "label": "任务名",
  "hint": "请输入",
  "variant": "box",
  "size": "md",
  "style": { "radius": 16, "borderColor": "#006A65" }
}

json

{ "type": "input", "name": "nickname", "hint": "请输入", "variant": "plain" }

json

{ "type": "input", "name": "account", "hint": "账号", "variant": "box", "icon": "img/user.svg" }

json

{ "type": "input", "name": "focus_blue", "label": "蓝色聚焦", "hint": "focusColor", "variant": "box", "style": { "focusColor": "#1565C0" } }

json

{
  "type": "input",
  "name": "password",
  "hint": "密码",
  "variant": "box",
  "password": true,
  "passwordToggle": true
}

Textarea 多行输入

多行文本。外观和 Input 一样：默认下划线，variant: "box" 为圆角边框，variant: "plain" 为无边框纯背景。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
value	String	默认值
hint	String	占位
minLines	Number	最少行数，默认 3
variant	String	同 Input：`line`（默认）/ `box` / `plain`
size	String	同 Input，仅 `box` / `plain` 生效
style.radius / borderWidth / borderColor / background / focusColor	—	同 Input

json

{ "type": "textarea", "name": "blue", "label": "蓝色聚焦", "hint": "focusColor", "variant": "box", "style": { "focusColor": "#1565C0" } }

SearchBar 搜索框

圆角搜索框，默认左侧有放大镜图标。高度默认 48dp，与中号输入框一致。type 写 searchBar 或 search 均可。写 icon 可换成项目内图片；icon: false 则不显示图标。键盘搜索键会触发 onSearch（没有则走 onChange）。默认灰边白底，点击不会跟主题色把整框刷绿；只有取消按钮文字跟 theme.primary。

参数名	类型	说明
name	String	对应 `data` 中的键，常用 `keyword`
hint / placeholder	String	占位，默认 `搜索`
value	String	默认值
icon	String / Boolean	左侧图标。不写则用内置放大镜；图片路径可替换；`false` / `none` 隐藏
iconSize	Number	图标边长 dp，默认 18
shape	String	`round`（默认圆角）/ `square` 直角一些
showCancel / cancel	Boolean / String	右侧取消按钮。`true` 文案为 `取消`；字符串则作为按钮文案
cancelText	String	取消按钮文案
disabled	Boolean	不可输入
onChange	String	内容变化时调用，`e.value` 是关键字。写在 list / grid 行内时还有 `e.item`、`e.index`
onSearch	String	键盘搜索键，`e.value` 是关键字
onCancel	String	点取消时调用，并清空输入
style.color	String	取消按钮文字颜色。不写则跟 `window.theme.primary`
style.focusColor	String	可选。聚焦时描边 / 光标颜色。不写则保持灰边白底，不会跟主题色把整框刷绿 / 刷红

json

{ "type": "searchBar", "name": "keyword", "hint": "搜索任务" }

json

{ "type": "searchBar", "name": "q", "hint": "不显示图标", "icon": false }

json

{ "type": "searchBar", "name": "q", "hint": "搜索", "showCancel": true, "onSearch": "onQuery" }

json

{ "type": "searchBar", "name": "blueQ", "hint": "蓝色取消", "showCancel": true, "style": { "color": "#1565C0" } }

Range 区间

一行两个输入框，用于最小值～最大值。左右各自 name。失焦后会保证后面的数不小于前面的：改大起点会抬高终点，改小终点会压低起点。

参数名	类型	说明
label	String	整行标题
separator / sep	String	间隔符，默认 `-`
start / from	Object / String	左侧输入。对象含 `name`、`hint`、`value`、`inputType`；也可只写字段名
end / to	Object / String	右侧输入，同上
name / hint / value	Array	简写：`["最小键","最大键"]`
inputType	String	写在外层时左右共用；也可写在 start / end 上
variant	String	同 Input，左右共用
size	String	同 Input，左右共用
style.focusColor	String	聚焦时描边 / 下划线 / 光标颜色。不写则跟 `window.theme.primary`。写在 range 上会传到左右两侧

json

{
  "type": "range",
  "label": "关注数量",
  "separator": "~",
  "inputType": "number",
  "start": { "name": "follow_min", "hint": "最小", "value": "10" },
  "end": { "name": "follow_max", "hint": "最大", "value": "80" }
}

json

{ "type": "range", "label": "蓝色聚焦", "separator": "~", "variant": "box", "style": { "focusColor": "#1565C0" }, "start": { "name": "blue_min", "hint": "从" }, "end": { "name": "blue_max", "hint": "到" } }

Stepper 步进器

加减数字，中间数字可直接输入。min / max / step 控制范围，step 可为小数。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
value	Number	当前值
min	Number	最小值，默认 0
max	Number	最大值，默认 99
step	Number	每次加减，默认 1
onChange	String	变化时调用，`e.value` 为数字。写在 list / grid 行内时还有 `e.item`、`e.index`
style.color	String	加减按钮颜色。不写则跟 `window.theme.primary`

json

{ "type": "stepper", "name": "count", "label": "关注数量", "value": 3, "min": 1, "max": 20 }

json

{ "type": "stepper", "name": "blue_count", "label": "蓝色加减", "value": 5, "style": { "color": "#1565C0" } }

Switch 开关

布尔开关：左侧文案，右侧滑动开关，不是勾选框。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	开关说明
value	Boolean	默认值
onChange	String	切换时调用。`e.value` 为布尔。写在 list / grid 行内时还有 `e.item`、`e.index`；写了 `name` 时有 `e.name`
style.color	String	打开后轨道和滑块颜色。不写则跟 `window.theme.primary`。不要写 `style.background`，否则会给整行刷底

json

{ "type": "switch", "name": "auto_start", "label": "自动开始", "value": false }

json

{ "type": "switch", "name": "blue", "label": "蓝色开关", "value": true, "style": { "color": "#1565C0" } }

列表行里放开关很常见。行内 onChange 会带上当前行：e.value 是开/关，e.item / e.index 定位是哪一条。不必给每行编一个假 name。未写 value 时默认读 item.enabled。

javascript

onToggle(e) {
  var list = this.data.comments || [];
  var i = e && e.index != null ? Number(e.index) : -1;
  if (i < 0 || i >= list.length) {
    return;
  }
  list[i].enabled = e.value === true;
  this.setData({ comments: list });
}

Select 下拉选择

单选下拉。options 为字符串，或 { "label", "value" }。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
value	String	默认选中项
options	Array	选项
onChange	String	切换时调用，`e.value` 为当前值。写在 list / grid 行内时还有 `e.item`、`e.index`
style.color	String	选中项 / 下拉高亮颜色。不写则跟 `window.theme.primary`

json

{ "type": "select", "name": "tone", "label": "蓝色下拉", "style": { "color": "#1565C0" }, "options": ["抖音", "小红书"] }

Checkbox 复选

不写 options 时是单个勾选，值为布尔；写了 options 时值为选中数组。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题或单选项文案
value	Boolean / Array	单个为布尔；多选项为选中值数组
options	Array	多选项：字符串，或 `{ "label", "value" }`
onChange	String	变化时调用。写在 list / grid 行内时还有 `e.item`、`e.index`
style.color	String	勾选按钮颜色。不写则跟 `window.theme.primary`。不要写 `style.background`

json

{ "type": "checkbox", "name": "blue_agree", "label": "蓝色勾选", "value": true, "style": { "color": "#1565C0" } }

Radio 单选

一组选项里只能选一项，值为当前项。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
value	String	默认选中项
options	Array	选项：字符串，或 `{ "label", "value" }`
onChange	String	切换时调用，`e.value` 为当前值。写在 list / grid 行内时还有 `e.item`、`e.index`
style.color	String	选中按钮颜色。不写则跟 `window.theme.primary`。不要写 `style.background`

json

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

Rate 评分

点星星打分。默认只能选整星。写 allowHalf: true 后可打半星（如 3.5）：点一颗星的左半为 n - 0.5，右半为整星 n。展示始终按 0.5 画，即使当前值来自 setData。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
value	Number	当前星数，支持 `3.5`
count	Number	星星个数，默认 5
allowHalf	Boolean	是否允许点出半星，默认 `false`。别名：`half`、`半星`。也可写 `step: 0.5`
size / iconSize	Number	星星边长 dp，默认 32
onChange	String	变化时调用，`e.value` 为星数。写在 list / grid 行内时还有 `e.item`、`e.index`
style.color	String	星星颜色。不写则跟 `window.theme.primary`

json

{ "type": "rate", "name": "score", "label": "任务完成度", "value": 4, "count": 5 }

json

{ "type": "rate", "name": "tone", "label": "蓝色星星", "value": 4, "style": { "color": "#1565C0" } }

json

{ "type": "rate", "name": "half", "label": "允许半星", "value": 3.5, "count": 5, "allowHalf": true }

Slider 滑动输入条

拖动选择一个数值。min / max / step / unit 自定义范围。写 marks 后轨道上会出现浅色圆点作为刻度，档位只是刻度，可停在任意位置。type 写 slider。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	整行标题
value	Number	默认值；不写则用 `min`
min / max	Number	默认 `0` / `100`
step	Number	步进，默认 `1`。有 `marks` 时仍按步进，不会吸到档位
unit	String	显示在当前值后面，如 `ms`、`%`
showValue	Boolean	是否显示当前值，默认 `true`
marks / dots	Array / Number / Boolean	轨道刻度：`[0,25,50,75,100]` 指定点；数字 `5` 表示均分 5 个点；`true` 配合 `markCount`。不限制停靠位置
markCount	Number	`marks: true` 时均分点数，默认 5
disabled / readonly	Boolean	不可拖动
onChange	String	变化时调用，`e.value` 为数字。写在 list / grid 行内时还有 `e.item`、`e.index`
style.color	String	左侧已走完轨道颜色。不写则跟 `window.theme.primary`
style.thumbColor	String	滑块圆点颜色。不写则跟 `style.color`
style.trackColor	String	未走完轨道颜色，默认 `#E3EBEA`

json

{ "type": "slider", "name": "delay", "label": "间隔", "value": 1500, "min": 500, "max": 3000, "step": 500, "unit": "ms" }

json

{ "type": "slider", "name": "tone", "label": "蓝色滑条", "value": 60, "style": { "color": "#1565C0" } }

json

{
  "type": "slider",
  "name": "speed",
  "label": "运行速度",
  "value": 50,
  "marks": [0, 25, 50, 75, 100],
  "unit": "%"
}

ImageUploader 图片上传

从相册选图，值为路径数组。点加号添加，点角上 × 删除。max 限制张数。

参数名	类型	说明
name	String	对应 `data` 中的键，值为字符串数组
label	String	字段标题
value	Array	已选图片路径
max / maxCount	Number	最多张数，默认 9
columns	Number	每行列数，默认 3
addText	String	加号格文案，默认 `+`
onChange	String	增删后调用，`e.value` 为路径数组。写在 list / grid 行内时还有 `e.item`、`e.index`

json

{ "type": "imageUploader", "name": "photos", "label": "凭证图", "max": 6 }

多级选择器。点字段后从底部或顶部弹出，每一级一列同时显示（省 / 市 / 区三列一起出来）。改第一列时，后面的列自动回到该级的第一项。点确定才写入。值为用 / 拼起来的路径，例如 "gd/sz/ns"；界面显示 "广东 / 深圳 / 南山"。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
value	String	默认路径，如 `"gd/sz/ns"`
hint	String	未选时的占位，默认 `请选择`
position	String	`bottom`（默认）从底部弹出；`top` 从顶部弹出。也可用 `上`
options / items	Array	`{ label, value, children }`。`children` 同结构，可多层
style.color	String	确定按钮颜色。不写则跟 `window.theme.primary`

json

{
  "type": "menu",
  "name": "address",
  "label": "收货地址",
  "position": "bottom",
  "options": [
    { "label": "广东", "value": "gd", "children": [
      { "label": "深圳市", "value": "sz", "children": [
        { "label": "南山区", "value": "ns" }
      ]}
    ]}
  ]
}

Cascader 级联选择

从字段点开的多级选择，交互和 Menu 一样：每一级一列同时显示，值为 / 拼起来的路径。适合省市区、分类。type 写 cascader。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
value	String	默认路径，如 `"zj/hz"`
hint	String	未选时的占位，默认 `请选择`
position	String	`bottom`（默认）/ `top`
options / items	Array	`{ label, value, children }`，可多层
style.color	String	确定按钮颜色。不写则跟 `window.theme.primary`

json

{
  "type": "cascader",
  "name": "address",
  "label": "地区",
  "options": [
    { "label": "浙江", "value": "zj", "children": [{ "label": "杭州", "value": "hz" }] }
  ]
}

Selector 选择组

一排可点的选项胶囊，像筛选标签。默认单选；multiple: true 为多选，值为数组。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
multiple / multi	Boolean	是否多选，默认 false
options / items	Array	`{ label, value }` 或字符串
value	String / Array	默认选中
onChange	String	变化时调用，`e.value` 为当前值。写在 list / grid 行内时还有 `e.item`、`e.index`
style.color	String	选中胶囊颜色。不写则跟 `window.theme.primary`

json

{ "type": "selector", "name": "tags", "multiple": true, "options": ["获客", "养号", "评论"] }

json

{ "type": "selector", "name": "tone", "label": "蓝色胶囊", "style": { "color": "#1565C0" }, "options": ["抖音", "小红书"] }

DateTime 日期时间选择器

弹出方式和 Menu 一样：底部（或顶部）多列滚轮，点确定写入。type 写 date / time / datetime 三种。日期是年/月/日，时间是时/分；日期时间先选日期，下一步再选时间。

参数名	类型	说明
type	String	`date` 值 `yyyy-MM-dd`；`time` 值 `HH:mm`；`datetime` 值 `yyyy-MM-dd HH:mm`
name	String	对应 `data` 中的键
label	String	字段标题
value	String	默认值，格式随 `type`
hint	String	未选时的占位
position	String	`bottom`（默认）/ `top`
min / max	String	可选，限制范围，格式与当前 `type` 一致
style.color	String	确定按钮颜色。不写则跟 `window.theme.primary`

json

{ "type": "date", "name": "day", "label": "日期", "value": "2026-08-24" }

json

{ "type": "time", "name": "clock", "label": "时间", "value": "09:30" }

json

{ "type": "datetime", "name": "when", "label": "开始", "value": "2026-08-24 09:30" }

json

{ "type": "date", "name": "blue_day", "label": "蓝色确定", "value": "2026-08-24", "style": { "color": "#1565C0" } }

Picker 选择器

底部滚轮选。一列选一项；options 带 children 时多列一起出，值和 Menu 一样用 / 拼接。适合星期、上午下午这类固定文案。日期和时间请用日期时间选择器。

参数名	类型	说明
name	String	对应 `data` 中的键
label	String	字段标题
value	String	当前选中项。多列时为路径，如 `"周一/上午"`
hint	String	未选时的占位
position	String	`bottom`（默认）/ `top`
options	Array	选项，字符串或 `{ text, value, children }`
style.color	String	确定按钮颜色。不写则跟 `window.theme.primary`

json

{
  "type": "picker",
  "name": "slot",
  "label": "星期时段",
  "value": "周一/上午",
  "options": [
    { "text": "周一", "children": ["上午", "下午"] },
    { "text": "周二", "children": ["上午", "下午"] }
  ]
}

json

{ "type": "picker", "name": "ampm", "label": "时段", "options": ["上午", "下午"] }

json

{ "type": "picker", "name": "blue_ampm", "label": "蓝色确定", "options": ["上午", "下午"], "style": { "color": "#1565C0" } }

组件

表单

Input 输入框

Textarea 多行输入

SearchBar 搜索框

Range 区间

Stepper 步进器

Switch 开关

Select 下拉选择

Checkbox 复选

Radio 单选

Rate 评分

Slider 滑动输入条

ImageUploader 图片上传

Menu 多级选择

Cascader 级联选择

Selector 选择组

DateTime 日期时间选择器

Picker 选择器

表单 ​

Input 输入框 ​

Textarea 多行输入 ​

SearchBar 搜索框 ​

Range 区间 ​

Stepper 步进器 ​

Switch 开关 ​

Select 下拉选择 ​

Checkbox 复选 ​

Radio 单选 ​

Rate 评分 ​

Slider 滑动输入条 ​

ImageUploader 图片上传 ​

Menu 多级选择 ​

Cascader 级联选择 ​

Selector 选择组 ​

DateTime 日期时间选择器 ​

Picker 选择器 ​

表单

Input 输入框

Textarea 多行输入

SearchBar 搜索框

Range 区间

Stepper 步进器

Switch 开关

Select 下拉选择

Checkbox 复选

Radio 单选

Rate 评分

Slider 滑动输入条

ImageUploader 图片上传

Menu 多级选择

Cascader 级联选择

Selector 选择组

DateTime 日期时间选择器

Picker 选择器