组件
先看清 页面结构 再来挑组件。body 是组件数组，可以嵌套 children。内容区的 padding / margin / background 写在页面或入口 window 的 style 里，见 配置。
下面各节是单个组件的字段和预览。完整工程里怎么拼页面、列表、表单、底栏，见 deekeScriptV2Demo：
bash
git clone https://github.com/DeekeScript/deekeScriptV2Demo.git按用途分组。右侧目录先看分类，再进具体组件。
- 通用：所有组件都能写的字段和样式
- 基础：文案、图片、头像、按钮、省略、徽标
- 表单：输入、搜索框、选择、步进器、评分、滑动条、进度条、进度圈、图片上传
- 导航：选项卡、分段、导航栏、侧边栏、序列、步骤、底栏、分页符
- 展示：走马灯、查看器、通告栏、空状态、加载、骨架屏、网页、折叠面板
- 反馈：弹层、对话框、弹窗、气泡、动作面板、轻提示、背景蒙层
- 布局：行列、卡片、列表、宫格
- 把一组内置组件打包复用：自定义组件
通用
所有组件都能写的字段和样式。
Common 通用字段
| 参数名 | 类型 | 说明 |
|---|---|---|
| type | String | 组件类型 |
| id | String | 可选。列表使用 bind，文案使用 {{字段}} |
| hidden | Boolean | 隐藏 |
| showIf | String | 条件显示，值为作用域路径 |
| action | Object | 轻触后的动作。type 为 navigate / redirect / switchTab / back / toast / save / openUrl，见 页面跳转 |
| onTap | String | 轻触一次时调用的方法名。onClick 视为同一事件 |
| onDoubleTap | String | 连续轻触两次 |
| onLongPress | String | 按住不放 |
| onScroll | String | list / grid：页面滚动且该组件在可见区域时调用 |
| onReachBottom | String | list / grid：该组件底部滚到可视区底部时调用。整页到底见 Page.onReachBottom |
| onReachTop | String | list / grid：该组件顶部滚到可视区顶部时调用 |
| onChange | String | input / textarea / range / slider / switch / select / menu / cascader / picker / date / time / datetime / checkbox / radio / tabs / search / stepper / rate / segmented / steps / sideBar / actionSheet / imageUploader / selector / collapse / pageIndicator 值变化时调用，e.value 是新值 |
| onFocus / onBlur | String | 输入框获得 / 失去焦点 |
| style | Object | 样式 |
轻触用 onTap（也认 onClick），双击用 onDoubleTap，长按用 onLongPress。没有 onTouchStart / onTouchMove / onTouchEnd，底层触摸会和滚动打架，这套 JSON 界面不需要。
Style 样式
颜色使用 #RRGGBB 或 #AARRGGBB。宽高数字单位是 dp，字体是 sp。
| 参数名 | 类型 | 说明 |
|---|---|---|
| width | Number / String | 数字 dp，或 match / wrap / "50%" / "100%"。100% 与 match 一样，占满父级；页面根上就是一屏宽 |
| height | Number / String | 同上。100% / match 占满父级高度；页面根上就是可见区域（标题栏 / 底栏之间） |
| minWidth / minHeight | Number / String | 最小宽高 |
| padding | Number | 四边内边距 dp |
| paddingTop / paddingRight / paddingBottom / paddingLeft | Number | 单边内边距 |
| margin | Number | 四边外边距 dp |
| marginTop / marginRight / marginBottom / marginLeft | Number | 单边外边距 |
| background | String | 背景色 |
| radius | Number | 圆角 dp |
| fontSize | Number | 字号 |
| color | String | 文字颜色 |
| fontWeight | String | bold / 默认 |
| align | String | 水平：left / center / right。文字对齐，或 column 里子项水平位置 |
| valign | String | 垂直：top / center / bottom。row 默认垂直居中；column 设 center 且 height: "100%" 可把内容摆在屏幕中间 |
| sticky | String | top 吸顶，bottom 吸底。只对页面 body 第一层有效，滚动时固定 |
| opacity | Number | 0～1 |
| gap | Number | column / row / list / card 子项间距；grid 卡片默认 12 |
| weight | Number | 在 row / 撑满高度的 column 里的权重 |
基础
文案、图片、头像、按钮、省略、徽标。
Text 文本
text、title、label 三个字段都可以当文案，会做 {{path}} 替换。普通正文，可改颜色、字号、加粗和对齐。
| 参数名 | 类型 | 说明 |
|---|---|---|
| text / title / label | String | 文案，支持 {{path}} |
| style.fontSize | Number | 字号 sp |
| style.color | String | 文字颜色 |
| style.fontWeight | String | bold / 默认 |
| style.align | String | left / center / right |
{
"title": {
"text": "文本",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "text",
"text": "普通文字，用来展示任务说明或正文。"
},
{
"type": "text",
"text": "加粗正文",
"style": {
"fontWeight": "bold"
}
},
{
"type": "text",
"text": "主题色",
"style": {
"color": "#006A65"
}
},
{
"type": "text",
"text": "居中对齐",
"style": {
"align": "center"
}
},
{
"type": "text",
"text": "当前账号：{{account}}"
}
]
}
]
}UI
普通文字，用来展示任务说明或正文。
加粗正文
主题色
居中对齐
当前账号：运营A
下面时钟每秒 setData 一次，预览里的时间会跟着变。
{
"title": {
"text": "时钟",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "notice",
"text": "时间由 page.js 每秒 setData 一次",
"style": {
"align": "center"
}
},
{
"type": "title",
"text": "{{clock}}",
"style": {
"align": "center"
}
},
{
"type": "text",
"text": "{{date}}",
"style": {
"align": "center",
"color": "#6F7978"
}
}
]
}
]
}UI
时间由 page.js 每秒 setData 一次
--:--:--
Title 标题
页面里的大标题，比 text 更醒目。不是顶部导航栏；导航栏写法见 页面结构。
| 参数名 | 类型 | 说明 |
|---|---|---|
| text / title / label | String | 标题文案，支持 {{path}} |
| style.fontSize | Number | 字号 sp |
| style.color | String | 文字颜色 |
| style.align | String | left / center / right |
{
"title": {
"text": "标题",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "title",
"text": "默认大标题"
},
{
"type": "title",
"text": "16 号标题",
"style": {
"fontSize": 16
}
},
{
"type": "title",
"text": "居中标题",
"style": {
"align": "center"
}
},
{
"type": "title",
"text": "{{headline}}",
"style": {
"color": "#006A65"
}
}
]
}UI
默认大标题
16 号标题
居中标题
来自 data 的标题
Notice 提示
灰色小字，用来写说明、注释或次要信息。
| 参数名 | 类型 | 说明 |
|---|---|---|
| text / title / label | String | 提示文案，支持 {{path}} |
| style.color | String | 文字颜色，默认灰色 |
| style.align | String | left / center / right |
{
"title": {
"text": "提示",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "notice",
"text": "灰色小字，用来写说明、注释或次要信息。"
},
{
"type": "notice",
"text": "* 数据每 5 分钟刷新一次"
},
{
"type": "notice",
"text": "失败时请检查网络后再重试。",
"style": {
"color": "#B42318"
}
},
{
"type": "notice",
"text": "当前状态：{{status}}",
"style": {
"align": "center"
}
}
]
}
]
}UI
灰色小字，用来写说明、注释或次要信息。
* 数据每 5 分钟刷新一次
失败时请检查网络后再重试。
当前状态：运行中
Tag 标签
短标签。默认浅绿底、深绿字。需要纯色底、白字时写 variant: "solid"，再用 style.background 换颜色。多个标签用 Row，或横向 List 绑定数组。文案字段与 Text 相同，支持 {{path}}。
| 参数名 | 类型 | 说明 |
|---|---|---|
| text / title / label | String | 标签文案 |
| variant | String | solid / 纯色 / 实心：纯色底、白字。别名：fill、filled |
| style.background | String | 背景色。默认浅绿 #EEF2F1；纯色时默认 #006A65 |
| style.color | String | 文字颜色。默认深绿 #006A65；纯色时默认 #FFFFFF |
| style.radius | Number | 圆角，默认 4 |
| style.padding | Number | 内边距；不写时为左右 8、上下 3 |
| style.fontSize | Number | 字号，默认 11 |
json
{ "type": "tag", "text": "进行中", "variant": "solid" }json
{ "type": "tag", "text": "警告", "variant": "solid", "style": { "background": "#C45C26" } }{
"title": {
"text": "标签",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "text",
"text": "默认",
"style": {
"fontWeight": "bold"
}
},
{
"type": "row",
"style": {
"gap": 6
},
"children": [
{
"type": "tag",
"text": "养号"
},
{
"type": "tag",
"text": "关注"
},
{
"type": "tag",
"text": "私信"
}
]
}
]
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "自定义颜色",
"style": {
"fontWeight": "bold"
}
},
{
"type": "row",
"style": {
"gap": 6
},
"children": [
{
"type": "tag",
"text": "完成",
"style": {
"background": "#E6F4F1",
"color": "#006A65"
}
},
{
"type": "tag",
"text": "进行中",
"style": {
"background": "#FFF4E5",
"color": "#B25E09"
}
},
{
"type": "tag",
"text": "失败",
"style": {
"background": "#FDECEC",
"color": "#B42318"
}
}
]
}
]
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "纯色",
"style": {
"fontWeight": "bold"
}
},
{
"type": "row",
"style": {
"gap": 6
},
"children": [
{
"type": "tag",
"text": "进行中",
"variant": "solid"
},
{
"type": "tag",
"text": "完成",
"variant": "solid",
"style": {
"background": "#006A65"
}
},
{
"type": "tag",
"text": "警告",
"variant": "solid",
"style": {
"background": "#C45C26"
}
},
{
"type": "tag",
"text": "失败",
"variant": "solid",
"style": {
"background": "#B42318"
}
}
]
}
]
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "列表绑定",
"style": {
"fontWeight": "bold"
}
},
{
"type": "list",
"direction": "row",
"bind": "tags",
"style": {
"gap": 6
},
"item": {
"type": "tag",
"text": "{{item}}"
}
}
]
}
]
}UI
默认
养号关注私信
自定义颜色
完成进行中失败
纯色
进行中完成警告失败
列表绑定
关注养号评论私信
Badge 徽标
数字、红点、文字状态都可以。可以单独放在 row 里，也可以包住头像 / 图标（写 children），徽标出现在右上角。tabs 选项和底部菜单也可写 badge 字段。
常见场景：
- 未读数字：会话列表右侧
12 - 数量封顶：
max: 99，超过显示99+ - 红点：只提醒“有更新”，不显示数字（
variant: "dot"或不写text） - 状态文字：
NEW/HOT/官方 - 叠在头像上：客服头像、未读头像
- 飘带：内容卡片角上的
推荐
| 参数名 | 类型 | 说明 |
|---|---|---|
| text / title / label | String | 徽标内容；不写或 variant: "dot" 则显示圆点 |
| max / overflowCount | Number | 数字超过该值显示 N+，如 99 → 99+ |
| variant | String | dot 红点；ribbon 小飘带；默认胶囊 |
| color | String | danger（默认红）/ primary / warning / info / neutral，或 #RRGGBB |
| children | Array | 有则叠在子节点右上角，常包 avatar / image |
json
{ "type": "badge", "text": "12" }json
{ "type": "badge", "text": "128", "max": 99 }json
{ "type": "badge", "variant": "dot", "children": [{ "type": "avatar", "text": "客" }] }{
"title": {
"text": "徽标",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "text",
"text": "未读数字",
"style": {
"fontWeight": "bold"
}
},
{
"type": "space",
"height": 8
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "text",
"text": "消息",
"style": {
"weight": 1
}
},
{
"type": "badge",
"text": "12"
}
]
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "text",
"text": "超过上限显示 99+",
"style": {
"weight": 1
}
},
{
"type": "badge",
"text": "128",
"max": 99
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "text",
"text": "红点提醒",
"style": {
"fontWeight": "bold"
}
},
{
"type": "space",
"height": 8
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "text",
"text": "有更新",
"style": {
"weight": 1
}
},
{
"type": "badge",
"variant": "dot"
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "text",
"text": "文字状态",
"style": {
"fontWeight": "bold"
}
},
{
"type": "space",
"height": 8
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "badge",
"text": "NEW"
},
{
"type": "badge",
"text": "HOT",
"color": "warning"
},
{
"type": "badge",
"text": "官方",
"color": "primary"
},
{
"type": "badge",
"text": "Beta",
"color": "info"
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "text",
"text": "叠在头像上",
"style": {
"fontWeight": "bold"
}
},
{
"type": "space",
"height": 8
},
{
"type": "row",
"style": {
"gap": 16
},
"children": [
{
"type": "badge",
"text": "8",
"children": [
{
"type": "avatar",
"src": "https://i.pravatar.cc/128?img=12",
"size": 40
}
]
},
{
"type": "badge",
"variant": "dot",
"children": [
{
"type": "avatar",
"text": "客",
"size": 40
}
]
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "text",
"text": "飘带",
"style": {
"fontWeight": "bold"
}
},
{
"type": "space",
"height": 8
},
{
"type": "badge",
"text": "推荐",
"variant": "ribbon",
"color": "warning"
}
]
}
]
}UI
未读数字
消息
12超过上限显示 99+
99+红点提醒
有更新
文字状态
NEWHOT官方Beta
叠在头像上
8
飘带
推荐Image 图片
src 为 http(s) 地址，或项目内 PNG / JPG / SVG（如 img/xhs.svg）。
宫格入口图见 Grid，需写出 "width": "50%"。
| 参数名 | 类型 | 说明 |
|---|---|---|
| src / url | String | 图片路径，支持 {{item.icon}} |
| fit | String | contain（默认，完整显示）或 cover（裁切铺满）。宫格入口图固定 contain，不裁剪 |
| style.width / height | Number / String | 宽高。数字是 dp，宽度也可写 "50%"。页面头图只写 height 会拉满宽度 |
| style.radius | Number | 圆角 |
{
"title": {
"text": "图片",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "image",
"src": "https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=800&h=360&q=80",
"fit": "cover",
"style": {
"height": 96,
"radius": 8
}
},
{
"type": "text",
"text": "今日任务",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "先完成养号，再处理私信和评论"
}
]
},
{
"type": "card",
"children": [
{
"type": "notice",
"text": "平台"
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "image",
"src": "img/dy.svg",
"style": {
"width": 36,
"height": 36,
"radius": 8
}
},
{
"type": "image",
"src": "img/xhs.svg",
"style": {
"width": 36,
"height": 36,
"radius": 8
}
},
{
"type": "image",
"src": "img/ks.svg",
"style": {
"width": 36,
"height": 36,
"radius": 8
}
},
{
"type": "image",
"src": "img/like.svg",
"style": {
"width": 36,
"height": 36,
"radius": 8
}
}
]
}
]
}
]
}UI
今日任务
先完成养号，再处理私信和评论
平台
Avatar 头像
圆形或方形头像。有 src 显示图片，没有则取 text 的首字。
| 参数名 | 类型 | 说明 |
|---|---|---|
| src / url | String | 图片路径，支持 {{path}} |
| text / title / label | String | 无图时显示的文字，只取首字 |
| size | Number | 边长 dp，默认 40。也可写在 style.size |
| shape | String | circle（默认）、square、rounded / 圆角 |
| style.borderWidth / borderColor | Number / String | 描边。圆角头像常配 borderWidth: 2 |
json
{ "type": "avatar", "src": "img/avatar-1.svg", "size": 48 }json
{ "type": "avatar", "text": "运", "size": 40, "shape": "square" }{
"title": {
"text": "头像",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "card",
"children": [
{
"type": "text",
"text": "图片头像",
"style": {
"fontWeight": "bold"
}
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "avatar",
"src": "https://i.pravatar.cc/128?img=12",
"size": 40
},
{
"type": "avatar",
"src": "https://i.pravatar.cc/128?img=32",
"size": 40
},
{
"type": "avatar",
"src": "https://i.pravatar.cc/128?img=47",
"size": 40
},
{
"type": "avatar",
"src": "https://i.pravatar.cc/128?img=15",
"size": 40
}
]
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "圆角边框",
"style": {
"fontWeight": "bold"
}
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "avatar",
"src": "https://i.pravatar.cc/128?img=12",
"size": 48,
"shape": "rounded",
"style": {
"borderWidth": 2,
"borderColor": "#006A65"
}
},
{
"type": "avatar",
"text": "运",
"size": 48,
"shape": "rounded",
"style": {
"borderWidth": 2,
"borderColor": "#C2410C"
}
},
{
"type": "avatar",
"src": "https://i.pravatar.cc/128?img=32",
"size": 48,
"shape": "square"
}
]
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "文字头像",
"style": {
"fontWeight": "bold"
}
},
{
"type": "row",
"style": {
"gap": 12
},
"children": [
{
"type": "avatar",
"text": "运",
"size": 40
},
{
"type": "avatar",
"text": "A",
"size": 48
},
{
"type": "avatar",
"text": "{{name}}",
"size": 56
}
]
}
]
}
]
}UI
图片头像
圆角边框
文字头像
Button 按钮
主操作按钮。size 缺省为大。可写 onTap 或 action（先调 JS 再执行动作）。
| 参数名 | 类型 | 说明 |
|---|---|---|
| text / title / label | String | 按钮文案 |
| size | String | sm / 小 紧凑；md / 中 卡片内操作；lg / 大 主操作（默认） |
| onTap | String | 轻触一次时调用的 Page 方法 |
| action | Object | 点击动作，见 导航 |
| style.background | String | 背景色，默认主题绿。可写 {{count1Bg}}，用 this.setData 切换选中态 |
| style.color | String | 文字颜色，同样支持 {{path}} |
| variant | String | outline / 描边：白底、描边和文字同色 |
| style.borderColor / borderWidth | String / Number | 描边色和宽度。outline 时默认跟 style.color |
| style.weight | Number | 在 row 里撑开 |
{
"title": {
"text": "按钮",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "text",
"text": "尺寸",
"style": {
"fontWeight": "bold"
}
},
{
"type": "button",
"text": "大按钮（默认）"
},
{
"type": "button",
"text": "中按钮",
"size": "中"
},
{
"type": "button",
"text": "小按钮",
"size": "小"
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "颜色",
"style": {
"fontWeight": "bold"
}
},
{
"type": "button",
"text": "主操作",
"action": {
"type": "toast",
"text": "已保存"
}
},
{
"type": "button",
"text": "次要",
"style": {
"background": "#EEF2F1",
"color": "#006A65"
},
"action": {
"type": "toast",
"text": "次要"
}
},
{
"type": "button",
"text": "危险",
"style": {
"background": "#B42318"
},
"action": {
"type": "toast",
"text": "危险"
}
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "并排",
"style": {
"fontWeight": "bold"
}
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "button",
"text": "取消",
"size": "中",
"style": {
"weight": 1,
"background": "#EEF2F1",
"color": "#006A65"
}
},
{
"type": "button",
"text": "确定",
"size": "中",
"style": {
"weight": 1
}
}
]
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "描边按钮",
"style": {
"fontWeight": "bold"
}
},
{
"type": "button",
"text": "主色描边",
"variant": "outline",
"action": {
"type": "toast",
"text": "描边"
}
},
{
"type": "space",
"height": 8
},
{
"type": "button",
"text": "橙色描边",
"variant": "outline",
"style": {
"color": "#C45C26"
},
"action": {
"type": "toast",
"text": "橙色"
}
}
]
}
]
}UI
尺寸
颜色
并排
描边按钮
Ellipsis 文本省略
超过指定行数显示省略号。expand 为 true（默认）时可展开 / 收起。
| 参数名 | 类型 | 说明 |
|---|---|---|
| text / title / label | String | 文案，支持 {{path}} |
| rows / maxLines | Number | 折叠时最多几行，默认 2 |
| expand | Boolean | 是否显示「展开 / 收起」，默认 true |
json
{ "type": "ellipsis", "rows": 2, "expand": true, "text": "比较长的说明……" }{
"title": {
"text": "文本省略",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "card",
"children": [
{
"type": "ellipsis",
"rows": 2,
"expand": true,
"text": "这是一段比较长的说明文字，用来演示超出两行之后如何省略。点「展开」可以看到全文，再点「收起」会回到两行。"
}
]
}
]
}UI
表单
输入、搜索框、选择组、级联、步进器、评分、滑动条、进度条、进度圈、图片上传。按钮见 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 / 小、md（默认）、lg / 大 |
| style.radius | Number | 边框圆角 dp；写出后自动切到边框样式。sm 默认 4，md 默认 6，lg 默认 8 |
| style.borderWidth | Number | 描边宽度 dp，默认 1 |
| style.borderColor | String | 描边颜色，默认 #DAE5E3 |
| style.background | String | 输入区背景，默认 #FFFFFF |
| icon / prefixIcon | String | 左侧图标，项目内图片或 http(s)。别名：startIcon、prefix、前图标 |
| iconSize | Number | 左侧图标边长 dp，默认 18。也可写在 style.iconSize |
| onChange | String | 值变化时调用，e.value 是新值 |
| 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": "password",
"hint": "密码",
"variant": "box",
"password": true,
"passwordToggle": true
}{
"title": {
"text": "输入框",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "text",
"text": "下划线（默认）",
"style": {
"fontWeight": "bold"
}
},
{
"type": "input",
"name": "account",
"label": "账号",
"hint": "请输入账号",
"value": "运营A"
},
{
"type": "input",
"name": "secret",
"label": "密码",
"hint": "请输入密码",
"password": true
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "边框输入框",
"style": {
"fontWeight": "bold"
}
},
{
"type": "input",
"name": "task_name",
"label": "默认圆角",
"hint": "请输入任务名",
"variant": "box",
"value": "早间养号"
},
{
"type": "input",
"name": "small",
"label": "小尺寸",
"hint": "size: sm",
"variant": "box",
"size": "sm"
},
{
"type": "input",
"name": "large",
"label": "大尺寸",
"hint": "size: lg",
"variant": "box",
"size": "lg"
},
{
"type": "input",
"name": "custom",
"label": "自定义圆角和描边",
"hint": "radius / borderColor",
"variant": "box",
"style": {
"radius": 16,
"borderColor": "#006A65",
"borderWidth": 1.5
}
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "text",
"text": "无边框纯背景",
"style": {
"fontWeight": "bold",
"paddingLeft": 12
}
},
{
"type": "input",
"name": "plain",
"hint": "请输入",
"variant": "plain"
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "键盘类型",
"style": {
"fontWeight": "bold"
}
},
{
"type": "input",
"name": "phone",
"label": "手机",
"hint": "11 位手机号",
"inputType": "phone",
"variant": "box"
},
{
"type": "input",
"name": "count",
"label": "数量",
"hint": "整数",
"inputType": "digit",
"variant": "box"
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "密码明文",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "密文为闭眼，点一下变为睁眼并显示明文。"
},
{
"type": "input",
"name": "pwd",
"label": "登录密码",
"hint": "请输入密码",
"variant": "box",
"password": true,
"passwordToggle": true,
"value": "123456"
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "带图标",
"style": {
"fontWeight": "bold"
}
},
{
"type": "input",
"name": "user",
"label": "用户",
"hint": "请输入账号",
"variant": "box",
"icon": "img/user.svg"
}
]
}
]
}UI
下划线（默认）
边框输入框
无边框纯背景
键盘类型
密码明文
密文为闭眼，点一下变为睁眼并显示明文。
带图标
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 | — | 同 Input |
{
"title": {
"text": "多行输入",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "textarea",
"name": "remark",
"label": "下划线",
"hint": "请输入备注",
"minLines": 3,
"value": "每天上午执行养号任务"
},
{
"type": "textarea",
"name": "bio",
"label": "边框",
"hint": "个人简介",
"minLines": 4,
"variant": "box",
"style": {
"radius": 8
}
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "textarea",
"name": "plain",
"hint": "请输入",
"minLines": 3,
"variant": "plain"
}
]
}UI
SearchBar 搜索框
圆角搜索框，默认左侧有放大镜图标。type 写 searchBar 或 search 均可。写 icon 可换成项目内图片；icon: false 则不显示图标。键盘搜索键会触发 onSearch（没有则走 onChange）。
| 参数名 | 类型 | 说明 |
|---|---|---|
| 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 是关键字 |
| onSearch | String | 键盘搜索键，e.value 是关键字 |
| onCancel | 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" }{
"title": {
"text": "搜索框",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "searchBar",
"name": "keyword",
"hint": "搜索任务",
"onChange": "onKeyword"
},
{
"type": "notice",
"text": "当前：{{keyword}}"
},
{
"type": "space",
"height": 8
},
{
"type": "searchBar",
"name": "noIcon",
"hint": "不显示图标",
"icon": false
},
{
"type": "space",
"height": 8
},
{
"type": "searchBar",
"name": "roundQ",
"hint": "圆角搜索",
"shape": "round"
},
{
"type": "space",
"height": 8
},
{
"type": "searchBar",
"name": "squareQ",
"hint": "方形搜索",
"shape": "square"
},
{
"type": "space",
"height": 8
},
{
"type": "searchBar",
"name": "cancelQ",
"hint": "带取消按钮",
"showCancel": true,
"cancelText": "取消",
"onCancel": "onCancelSearch"
}
]
}
]
}UI
当前：
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，左右共用 |
json
{
"type": "range",
"label": "关注数量",
"separator": "~",
"inputType": "number",
"start": { "name": "follow_min", "hint": "最小", "value": "10" },
"end": { "name": "follow_max", "hint": "最大", "value": "80" }
}{
"title": {
"text": "区间",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "range",
"label": "关注数量",
"separator": "~",
"inputType": "number",
"start": {
"name": "follow_min",
"hint": "最小",
"value": "10"
},
"end": {
"name": "follow_max",
"hint": "最大",
"value": "80"
}
},
{
"type": "range",
"label": "边框区间",
"separator": "~",
"variant": "box",
"inputType": "digit",
"start": {
"name": "age_min",
"hint": "从"
},
"end": {
"name": "age_max",
"hint": "到"
}
}
]
}
]
}UI
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 为数字 |
json
{ "type": "stepper", "name": "count", "label": "关注数量", "value": 3, "min": 1, "max": 20 }{
"title": {
"text": "步进器",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "card",
"children": [
{
"type": "stepper",
"name": "count",
"label": "关注数量",
"value": 3,
"min": 1,
"max": 20
},
{
"type": "stepper",
"name": "delay",
"label": "间隔（秒）",
"value": 2,
"min": 0.5,
"max": 10,
"step": 0.5
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "notice",
"text": "数量 {{count}} · 间隔 {{delay}} 秒"
}
]
}UI
关注数量
间隔（秒）
数量 3 · 间隔 2 秒
Switch 开关
布尔开关：左侧文案，右侧滑动开关，不是勾选框。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 开关说明 |
| value | Boolean | 默认值 |
| onChange | String | 切换时调用，e.value 为布尔 |
{
"title": {
"text": "开关",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "switch",
"name": "auto_start",
"label": "自动开始",
"value": false
},
{
"type": "switch",
"name": "notify",
"label": "完成通知",
"value": true
},
{
"type": "switch",
"name": "night",
"label": "夜间模式",
"value": false
}
]
}
]
}UI
Select 下拉选择
单选下拉。options 为字符串，或 { "label", "value" }。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题 |
| value | String | 默认选中项 |
| options | Array | 选项 |
| onChange | String | 切换时调用，e.value 为当前值 |
{
"title": {
"text": "下拉选择",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "select",
"name": "platform",
"label": "平台",
"options": [
{
"label": "抖音",
"value": "dy"
},
{
"label": "小红书",
"value": "xhs"
},
{
"label": "快手",
"value": "ks"
}
]
},
{
"type": "select",
"name": "level",
"label": "优先级",
"options": [
"高",
"中",
"低"
]
}
]
}
]
}UI
Checkbox 复选
不写 options 时是单个勾选，值为布尔；写了 options 时值为选中数组。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题或单选项文案 |
| value | Boolean / Array | 单个为布尔；多选项为选中值数组 |
| options | Array | 多选项：字符串，或 { "label", "value" } |
| onChange | String | 变化时调用 |
{
"title": {
"text": "复选",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "checkbox",
"name": "agree",
"label": "已阅读并同意协议",
"value": true
},
{
"type": "checkbox",
"name": "platforms",
"label": "平台",
"options": [
{
"label": "小红书",
"value": "xhs"
},
{
"label": "抖音",
"value": "dy"
},
{
"label": "快手",
"value": "ks"
}
],
"value": [
"xhs"
]
}
]
}
]
}UI
平台
Radio 单选
一组选项里只能选一项，值为当前项。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题 |
| value | String | 默认选中项 |
| options | Array | 选项：字符串，或 { "label", "value" } |
| onChange | String | 切换时调用，e.value 为当前值 |
{
"title": {
"text": "单选",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "radio",
"name": "mode",
"label": "运行模式",
"options": [
{
"label": "稳妥",
"value": "safe"
},
{
"label": "均衡",
"value": "normal"
},
{
"label": "激进",
"value": "fast"
}
],
"value": "safe"
}
]
}
]
}UI
运行模式
Rate 评分
点星星打分。count 为星星个数，值为 1～count 的整数。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题 |
| value | Number | 当前星数 |
| count | Number | 星星个数，默认 5 |
| onChange | String | 变化时调用，e.value 为星数 |
json
{ "type": "rate", "name": "score", "label": "任务完成度", "value": 4, "count": 5 }{
"title": {
"text": "评分",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "card",
"children": [
{
"type": "rate",
"name": "score",
"label": "任务完成度",
"value": 4,
"count": 5
},
{
"type": "rate",
"name": "star",
"label": "三星评价",
"value": 2,
"count": 3
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "notice",
"text": "完成度 {{score}} 星 · 评价 {{star}} 星"
}
]
}UI
任务完成度
三星评价
完成度 4 星 · 评价 2 星
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 为数字 |
json
{ "type": "slider", "name": "delay", "label": "间隔", "value": 1500, "min": 500, "max": 3000, "step": 500, "unit": "ms" }json
{
"type": "slider",
"name": "speed",
"label": "运行速度",
"value": 50,
"marks": [0, 25, 50, 75, 100],
"unit": "%"
}{
"title": {
"text": "滑动输入条",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "slider",
"name": "delay",
"label": "间隔",
"value": 1500,
"min": 500,
"max": 3000,
"step": 500,
"unit": "ms"
},
{
"type": "slider",
"name": "like_rate",
"label": "点赞概率",
"value": 20,
"min": 0,
"max": 100,
"unit": "%"
},
{
"type": "slider",
"name": "speed",
"label": "运行速度",
"value": 50,
"min": 0,
"max": 100,
"unit": "%",
"marks": [
0,
25,
50,
75,
100
]
},
{
"type": "slider",
"name": "level",
"label": "强度档位",
"value": 50,
"min": 0,
"max": 100,
"unit": "%",
"marks": 5
}
]
}
]
}UI
ProgressBar 进度条
只展示当前进度，不能拖动。用 value 或 this.setData 改数值。别名 progress。可拖动的刻度条见 Slider。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 整行标题 |
| value | Number | 当前进度；不写则用 min |
| min | Number | 最小值，默认 0 |
| max | Number | 最大值，默认 100 |
| unit | String | 显示在当前值后面，如 % |
| showValue | Boolean | 是否显示当前值，默认 true |
json
{ "type": "progressBar", "name": "upload", "label": "上传进度", "value": 70, "unit": "%" }{
"title": {
"text": "进度条",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "progressBar",
"name": "speed",
"label": "运行速度",
"value": 50,
"min": 0,
"max": 100,
"unit": "%"
},
{
"type": "progressBar",
"name": "upload",
"label": "上传进度",
"value": 70,
"min": 0,
"max": 100,
"unit": "%"
},
{
"type": "progressBar",
"name": "done",
"label": "已完成",
"value": 100,
"min": 0,
"max": 100,
"unit": "%"
}
]
}
]
}UI
ProgressCircle 进度圈
圆环进度，只展示不拖动。默认边长 88、环宽 10，占比一眼能看出来。min / max / unit 与 ProgressBar 相同。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题 |
| value | Number | 当前值 |
| min / max | Number | 默认 0 / 100 |
| unit | String | 中间文字后缀，如 % |
| size | Number | 边长 dp，默认 88 |
| strokeWidth | Number | 环宽 dp，默认 10 |
| showValue | Boolean | 是否显示中间数值，默认 true |
| style.color | String | 进度色，默认主题绿 |
| trackColor | String | 底环颜色，默认 #DAE5E3 |
json
{ "type": "progressCircle", "name": "done", "value": 70, "unit": "%", "size": 88 }{
"title": {
"text": "进度圈",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "card",
"children": [
{
"type": "row",
"style": {
"gap": 16
},
"children": [
{
"type": "progressCircle",
"name": "done",
"value": 70,
"unit": "%",
"size": 88,
"strokeWidth": 10
},
{
"type": "progressCircle",
"name": "cpu",
"value": 36,
"unit": "%",
"size": 88,
"strokeWidth": 10,
"style": {
"color": "#C2410C"
}
}
]
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "notice",
"text": "完成 {{done}}% · CPU {{cpu}}%"
}
]
}UI
70%
36%
完成 70% · CPU 36%
ImageUploader 图片上传
从相册选图，值为路径数组。点加号添加，点角上 × 删除。max 限制张数。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键，值为字符串数组 |
| label | String | 字段标题 |
| value | Array | 已选图片路径 |
| max / maxCount | Number | 最多张数，默认 9 |
| columns | Number | 每行列数，默认 3 |
| addText | String | 加号格文案，默认 + |
| onChange | String | 增删后调用，e.value 为路径数组 |
json
{ "type": "imageUploader", "name": "photos", "label": "凭证图", "max": 6 }{
"title": {
"text": "图片上传",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "card",
"children": [
{
"type": "imageUploader",
"name": "photos",
"label": "凭证图",
"max": 6,
"columns": 3,
"onChange": "onPhotos",
"value": [
"img/avatar-1.svg",
"img/avatar-2.svg"
]
},
{
"type": "notice",
"text": "已选 {{count}} 张"
}
]
}
]
}UI
凭证图
已选 2 张
Menu 多级选择
多级选择器。点字段后从底部或顶部弹出，每一级一列同时显示（省 / 市 / 区三列一起出来）。改第一列时，后面的列自动回到该级的第一项。点确定才写入。值为用 / 拼起来的路径，例如 "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 同结构，可多层 |
json
{
"type": "menu",
"name": "address",
"label": "收货地址",
"position": "bottom",
"options": [
{ "label": "广东", "value": "gd", "children": [
{ "label": "深圳市", "value": "sz", "children": [
{ "label": "南山区", "value": "ns" }
]}
]}
]
}{
"title": {
"text": "省市区",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "notice",
"text": "三级同时显示。改省后，市 / 区自动回到该省第一项。"
},
{
"type": "menu",
"name": "address",
"label": "收货地址",
"position": "bottom",
"hint": "请选择省市区",
"options": [
{
"label": "北京",
"value": "bj",
"children": [
{
"label": "北京市",
"value": "bj",
"children": [
{
"label": "海淀区",
"value": "hd"
},
{
"label": "朝阳区",
"value": "cy"
},
{
"label": "东城区",
"value": "dc"
}
]
}
]
},
{
"label": "上海",
"value": "sh",
"children": [
{
"label": "上海市",
"value": "sh",
"children": [
{
"label": "浦东新区",
"value": "pd"
},
{
"label": "黄浦区",
"value": "hp"
},
{
"label": "徐汇区",
"value": "xh"
}
]
}
]
},
{
"label": "广东",
"value": "gd",
"children": [
{
"label": "广州市",
"value": "gz",
"children": [
{
"label": "天河区",
"value": "th"
},
{
"label": "越秀区",
"value": "yx"
}
]
},
{
"label": "深圳市",
"value": "sz",
"children": [
{
"label": "南山区",
"value": "ns"
},
{
"label": "福田区",
"value": "ft"
},
{
"label": "宝安区",
"value": "ba"
}
]
}
]
},
{
"label": "浙江",
"value": "zj",
"children": [
{
"label": "杭州市",
"value": "hz",
"children": [
{
"label": "西湖区",
"value": "xh"
},
{
"label": "余杭区",
"value": "yh"
}
]
},
{
"label": "宁波市",
"value": "nb",
"children": [
{
"label": "鄞州区",
"value": "yz"
},
{
"label": "海曙区",
"value": "hs"
}
]
}
]
}
]
},
{
"type": "notice",
"text": "当前：{{address}}"
},
{
"type": "space",
"height": 8
},
{
"type": "notice",
"text": "同一数据，从顶部弹出"
},
{
"type": "menu",
"name": "hukou",
"label": "户籍",
"position": "top",
"hint": "请选择",
"options": [
{
"label": "北京",
"value": "bj",
"children": [
{
"label": "北京市",
"value": "bj",
"children": [
{
"label": "海淀区",
"value": "hd"
},
{
"label": "朝阳区",
"value": "cy"
},
{
"label": "东城区",
"value": "dc"
}
]
}
]
},
{
"label": "上海",
"value": "sh",
"children": [
{
"label": "上海市",
"value": "sh",
"children": [
{
"label": "浦东新区",
"value": "pd"
},
{
"label": "黄浦区",
"value": "hp"
},
{
"label": "徐汇区",
"value": "xh"
}
]
}
]
},
{
"label": "广东",
"value": "gd",
"children": [
{
"label": "广州市",
"value": "gz",
"children": [
{
"label": "天河区",
"value": "th"
},
{
"label": "越秀区",
"value": "yx"
}
]
},
{
"label": "深圳市",
"value": "sz",
"children": [
{
"label": "南山区",
"value": "ns"
},
{
"label": "福田区",
"value": "ft"
},
{
"label": "宝安区",
"value": "ba"
}
]
}
]
},
{
"label": "浙江",
"value": "zj",
"children": [
{
"label": "杭州市",
"value": "hz",
"children": [
{
"label": "西湖区",
"value": "xh"
},
{
"label": "余杭区",
"value": "yh"
}
]
},
{
"label": "宁波市",
"value": "nb",
"children": [
{
"label": "鄞州区",
"value": "yz"
},
{
"label": "海曙区",
"value": "hs"
}
]
}
]
}
]
},
{
"type": "notice",
"text": "当前：{{hukou}}"
}
]
}UI
三级同时显示。改省后，市 / 区自动回到该省第一项。
当前：gd/sz/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 }，可多层 |
json
{
"type": "cascader",
"name": "address",
"label": "地区",
"options": [
{ "label": "浙江", "value": "zj", "children": [{ "label": "杭州", "value": "hz" }] }
]
}{
"title": {
"text": "级联选择",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "cascader",
"name": "address",
"label": "地区",
"hint": "请选择省 / 市",
"options": [
{
"label": "浙江",
"value": "zj",
"children": [
{
"label": "杭州",
"value": "hz"
},
{
"label": "宁波",
"value": "nb"
}
]
},
{
"label": "江苏",
"value": "js",
"children": [
{
"label": "南京",
"value": "nj"
},
{
"label": "苏州",
"value": "sz"
}
]
}
]
},
{
"type": "notice",
"text": "已选 {{address}}"
}
]
}
]
}UI
已选
Selector 选择组
一排可点的选项胶囊，像筛选标签。默认单选；multiple: true 为多选，值为数组。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题 |
| multiple / multi | Boolean | 是否多选，默认 false |
| options / items | Array | { label, value } 或字符串 |
| value | String / Array | 默认选中 |
| onChange | String | 变化时调用，e.value 为当前值 |
json
{ "type": "selector", "name": "tags", "multiple": true, "options": ["获客", "养号", "评论"] }{
"title": {
"text": "选择组",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "selector",
"name": "platform",
"label": "平台",
"options": [
{
"label": "抖音",
"value": "dy"
},
{
"label": "小红书",
"value": "xhs"
},
{
"label": "快手",
"value": "ks"
}
]
},
{
"type": "selector",
"name": "tags",
"label": "标签（多选）",
"multiple": true,
"options": [
"获客",
"养号",
"评论",
"私信"
]
},
{
"type": "notice",
"text": "平台 {{platform}} · 标签 {{tags}}"
}
]
}
]
}UI
平台
标签（多选）
平台 dy · 标签 ["获客"]
Date 日期
弹出方式和 Menu 一样：底部（或顶部）多列滚轮，点确定写入。值为 yyyy-MM-dd。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题 |
| value | String | 默认值，如 "2026-08-24" |
| hint | String | 未选时的占位 |
| position | String | 同 Menu：bottom（默认）/ top |
| min / max | String | 可选，限制范围，格式 yyyy-MM-dd |
json
{ "type": "date", "name": "day", "label": "日期", "value": "2026-08-24" }{
"title": {
"text": "日期",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "date",
"name": "day",
"label": "日期",
"value": "2026-08-24"
},
{
"type": "notice",
"text": "当前：{{day}}"
}
]
}UI
当前：2026-08-24
Time 时间
24 小时时 / 分滚轮。值为 HH:mm。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题 |
| value | String | 默认值，如 "09:30" |
| hint | String | 未选时的占位 |
| position | String | bottom（默认）/ top |
| min / max | String | 可选，限制范围，格式 HH:mm |
json
{ "type": "time", "name": "clock", "label": "时间", "value": "09:30" }{
"title": {
"text": "时间",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "time",
"name": "clock",
"label": "时间",
"value": "09:30"
},
{
"type": "notice",
"text": "当前：{{clock}}"
}
]
}UI
当前：09:30
Datetime 日期时间
先选年/月/日，再点下一步选时/分。值为 yyyy-MM-dd HH:mm。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题 |
| value | String | 默认值，如 "2026-08-24 09:30" |
| hint | String | 未选时的占位 |
| position | String | bottom（默认）/ top |
| min / max | String | 可选，限制范围，格式与值一致 |
json
{ "type": "datetime", "name": "when", "label": "开始", "value": "2026-08-24 09:30" }{
"title": {
"text": "日期时间",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "datetime",
"name": "when",
"label": "开始",
"value": "2026-08-24 09:30"
},
{
"type": "notice",
"text": "当前：{{when}}"
}
]
}UI
当前：2026-08-24 09:30
Picker 选择器
type: picker 用 mode 区分日期 / 时间 / 日期时间，效果分别等同于 Date / Time / Datetime。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| label | String | 字段标题 |
| value | String | 默认值，格式随 mode |
| hint | String | 未选时的占位 |
| position | String | bottom（默认）/ top |
| mode | String | date（默认）/ time / datetime。中文别名：时间、日期时间 |
| min / max | String | 可选，限制范围，格式与当前 mode 一致 |
json
{ "type": "picker", "name": "day2", "label": "日期", "mode": "date" }{
"title": {
"text": "时间选择",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "notice",
"text": "日期是年/月/日，时间是时/分。日期时间先选日期，下一步再选时间。"
},
{
"type": "date",
"name": "day",
"label": "日期",
"value": "2026-08-24"
},
{
"type": "time",
"name": "clock",
"label": "时间",
"value": "09:30"
},
{
"type": "datetime",
"name": "when",
"label": "日期时间",
"value": "2026-08-24 09:30"
},
{
"type": "picker",
"name": "alias",
"label": "picker · date",
"mode": "date"
},
{
"type": "notice",
"text": "{{day}} {{clock}}"
},
{
"type": "notice",
"text": "{{when}}"
}
]
}UI
日期是年/月/日，时间是时/分。日期时间先选日期，下一步再选时间。
2026-08-24 09:30
2026-08-24 09:30
导航
页内切换、导航栏、侧边栏、步骤、分页符和底部菜单。
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 方法 |
{
"title": {
"text": "选项卡",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "tabs",
"name": "tab",
"value": "follow",
"onChange": "onTab",
"items": [
{
"text": "关注",
"value": "follow",
"children": [
{
"type": "text",
"text": "今日关注 12 人",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "先完成养号，再处理私信"
}
]
},
{
"text": "点赞",
"value": "like",
"badge": "8",
"children": [
{
"type": "text",
"text": "点赞进行中",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "已完成 36 次"
}
]
},
{
"text": "记录",
"value": "log",
"children": [
{
"type": "empty",
"icon": "img/like.svg",
"text": "暂无记录"
}
]
}
]
}
]
}UI
今日关注 12 人
先完成养号，再处理私信
Segmented 分段控制器
同一行里切换几个互斥选项，比 Tabs 更紧凑，不带面板内容。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| value | String | 当前选中项 |
| options / items | Array | 字符串，或 { label, value }。text 也可用 |
| onChange | String | 切换时调用，e.value 为当前值 |
json
{
"type": "segmented",
"name": "range",
"value": "day",
"options": [
{ "label": "日", "value": "day" },
{ "label": "周", "value": "week" },
{ "label": "月", "value": "month" }
]
}{
"title": {
"text": "分段",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "card",
"children": [
{
"type": "segmented",
"name": "range",
"value": "day",
"onChange": "onRange",
"options": [
{
"label": "日",
"value": "day"
},
{
"label": "周",
"value": "week"
},
{
"label": "月",
"value": "month"
}
]
},
{
"type": "space",
"height": 12
},
{
"type": "text",
"text": "{{hint}}"
}
]
}
]
}UI
查看今日数据
NavBar 导航栏
页内导航栏，不是页面 JSON 根上的 title。适合 title.hidden: true 时自己画返回和标题。页面 style.padding 写成 0，导航栏就会贴着内容区顶端。
| 参数名 | 类型 | 说明 |
|---|---|---|
| title / text | String | 中间标题 |
| leftText / left | String | 左侧文案，默认 返回 |
| rightText / right | String | 右侧文案，不写则不显示 |
| onLeft | String | 左侧点击。不写则 back() |
| onRight | String | 右侧点击 |
json
{ "type": "navBar", "title": "详情", "leftText": "返回", "rightText": "更多", "onRight": "onMore" }{
"title": {
"hidden": true
},
"style": {
"background": "#F5F5F5",
"padding": 0
},
"body": [
{
"type": "navBar",
"title": "详情",
"leftText": "返回",
"rightText": "更多",
"onRight": "onMore"
},
{
"type": "column",
"style": {
"padding": 12,
"gap": 8
},
"children": [
{
"type": "notice",
"text": "隐藏系统顶栏时，用 navBar 自己画返回和标题。"
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "适合详情页、二级页。"
}
]
}
]
}
]
}UI
隐藏系统顶栏时，用 navBar 自己画返回和标题。
适合详情页、二级页。
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 |
json
{
"type": "sideBar",
"name": "cat",
"value": "follow",
"items": [
{ "text": "关注", "value": "follow" },
{ "text": "点赞", "value": "like" }
]
}{
"title": {
"text": "侧边导航",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 0
},
"body": [
{
"type": "row",
"style": {
"height": "100%",
"width": "match"
},
"children": [
{
"type": "sideBar",
"name": "cat",
"value": "follow",
"onChange": "onCat",
"items": [
{
"text": "关注",
"value": "follow"
},
{
"text": "点赞",
"value": "like"
},
{
"text": "评论",
"value": "comment"
},
{
"text": "私信",
"value": "msg"
}
]
},
{
"type": "column",
"style": {
"weight": 1,
"padding": 16,
"gap": 8
},
"children": [
{
"type": "text",
"text": "{{title}}",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "{{desc}}"
}
]
}
]
}
]
}UI
IndexBar 序列
通讯录式列表，右侧字母轨可跳到对应分组。滚动发生在列表内部，不会带动整页。数据是扁平数组时用 indexKey（默认 letter）分组；也可以写成 { index, children }。
| 参数名 | 类型 | 说明 |
|---|---|---|
| bind | String | 数据路径，对应 data 中的数组 |
| indexKey | String | 分组字段，默认 letter |
| item | Object | 每一项的组件模板 |
| items | Array | 未写 bind 时的静态数据 |
json
{
"type": "indexBar",
"bind": "contacts",
"indexKey": "letter",
"item": { "type": "text", "text": "{{item.name}}" }
}{
"title": {
"text": "序列",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 0
},
"body": [
{
"type": "notice",
"text": "右侧字母可跳到对应分组。",
"style": {
"padding": 12
}
},
{
"type": "indexBar",
"bind": "contacts",
"indexKey": "letter",
"item": {
"type": "text",
"text": "{{item.name}}",
"style": {
"padding": 12
}
}
}
]
}UI
右侧字母可跳到对应分组。
Steps 步骤条
展示当前走到第几步。value 为下标，从 0 开始。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| value | Number | 当前步骤下标，从 0 开始 |
| items / options | Array | 步骤文案，字符串或 { text } |
| direction | String | row（默认）横排；column / vertical 竖排 |
| onChange | String | 值变化时调用（一般用按钮改 setData） |
json
{
"type": "steps",
"name": "step",
"value": 1,
"items": [{ "text": "提交" }, { "text": "审核" }, { "text": "完成" }]
}{
"title": {
"text": "步骤条",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "card",
"children": [
{
"type": "steps",
"name": "step",
"value": 1,
"items": [
{
"text": "提交"
},
{
"text": "审核"
},
{
"text": "完成"
}
]
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "button",
"text": "上一步",
"size": "md",
"onTap": "onPrev",
"style": {
"weight": 1,
"background": "#EEF2F1",
"color": "#006A65"
}
},
{
"type": "button",
"text": "下一步",
"size": "md",
"onTap": "onNext",
"style": {
"weight": 1
}
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "notice",
"text": "当前步骤 {{step}}"
}
]
}UI
1提交
2审核
3完成
当前步骤 1
PageIndicator 分页符
一排圆点或短条，表示当前页。可和走马灯分开用，点圆点会改 value（从 0 起）。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键 |
| count | Number | 点数 |
| value | Number | 当前下标，从 0 起 |
| variant | String | dot（默认）/ line 短条 |
| onChange | String | 点选后调用，e.value 为下标 |
json
{ "type": "pageIndicator", "name": "page", "count": 5, "value": 1 }{
"title": {
"text": "分页符",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "pageIndicator",
"name": "page",
"count": 5,
"value": 1
},
{
"type": "space",
"height": 12
},
{
"type": "pageIndicator",
"name": "line",
"count": 4,
"value": 0,
"variant": "line"
},
{
"type": "notice",
"text": "当前第 {{page}} 页"
}
]
}
]
}UI
当前第 1 页
TabBar 底部菜单
底部菜单。不是 body 里的 type，和导航栏一样属于整页壳子：写在入口 deekeScript.json 的 bottomMenus，颜色写在 window.tabBar。不配或空数组则没有底栏。
切 Tab 会显示对应页面（不是 navigate 打开新页）。已经打开过的 Tab 会保留数据和滚动，再点回来只走 onShow。完整字段见 配置。二级页用 this.setTabBar({ items }) 创建底栏，this.setTabBar() 恢复默认；某一项的文字、角标、隐藏用 this.setTabBarItem；整栏文字色用 color / selectedColor，图标色用 iconColor / selectedIconColor，背景单独用 background。只传要改的字段，不会互相覆盖。见 底部菜单。
| 写在哪 | 字段 | 说明 |
|---|---|---|
bottomMenus[] | title | 文字，也可用 {NAME} |
| icon / selectedIcon | 图标。未写 selectedIcon 时沿用 icon 并按选中色着色 | |
| page | 打开的页面目录或 pages 里的 id | |
| badge | 初始角标 | |
window.tabBar | color / selectedColor | 未选中 / 选中的文字颜色。未写图标色时图标也用这个 |
| iconColor / selectedIconColor | 未选中 / 选中的图标颜色。不写则跟文字色 | |
| background / borderColor | 背景和顶部分割线 | |
| fontSize | 文字大小 sp |
json
{
"homePage": "pages/home",
"window": {
"tabBar": {
"color": "#6F7978",
"selectedColor": "#006A65",
"background": "#FFFFFF",
"borderColor": "#EEEEEE"
}
},
"bottomMenus": [
{ "title": "首页", "icon": "img/home.svg", "page": "pages/home" },
{ "title": "消息", "icon": "img/records.svg", "page": "pages/msg", "badge": 3 },
{ "title": "设置", "icon": "img/setting.svg", "page": "pages/settings" }
]
}javascript
this.setTabBarItem({ page: 'msg', badge: 9 });
this.setTabBarItem({ page: 'msg', title: '私信' });
this.setTabBarItem({ page: 'msg', hidden: true });
this.setTabBarStyle({ color: '#C2410C', selectedColor: '#EA580C' });
this.setTabBarStyle({ iconColor: '#C2410C', selectedIconColor: '#EA580C' });
this.setTabBarStyle({ background: '#1A1A1A', borderColor: '#333333' });Page({
onBadge() {
this.setTabBarItem({ page: 'msg', badge: 9 });
},
onClearBadge() {
this.setTabBarItem({ page: 'msg', badge: 0 });
},
onHideMsg() {
this.setTabBarItem({ page: 'msg', hidden: true });
},
onShowMsg() {
this.setTabBarItem({ page: 'msg', hidden: false });
},
onRename() {
this.setTabBarItem({ page: 'msg', title: '私信' });
},
onRestoreName() {
this.setTabBarItem({ page: 'msg', title: '消息' });
},
onOrangeText() {
this.setTabBarStyle({ color: '#C2410C', selectedColor: '#EA580C' });
},
onOrangeIcon() {
this.setTabBarStyle({ iconColor: '#C2410C', selectedIconColor: '#EA580C' });
},
onDarkBar() {
this.setTabBarStyle({ background: '#1A1A1A', borderColor: '#333333' });
},
onLightBar() {
this.setTabBarStyle({ background: '#FFFFFF', borderColor: '#EEEEEE' });
}
});底部菜单
文字色 color / selectedColor，图标色 iconColor / selectedIconColor，只传要改的字段。
展示
走马灯、查看器、通告栏、空状态、加载、骨架屏、折叠面板、网页。
Swiper 走马灯
多个 banner 左右切换。页面 padding 写成 0 并放在 body 最前，即可贴顶贴边。autoplay 默认开启，interval 为毫秒。
| 参数名 | 类型 | 说明 |
|---|---|---|
| bind | String | 数据路径，对应 data 中的数组 |
| items | Array | 未写 bind 时的静态项 |
| item | Object | 每一屏的组件模板 |
| height | Number | 高度 dp，默认 140 |
| autoplay | Boolean | 是否自动播放，默认 true |
| interval | Number | 自动播放间隔毫秒，默认约 3000 |
json
{
"type": "swiper",
"bind": "banners",
"height": 140,
"autoplay": true,
"interval": 2800,
"item": { "type": "image", "src": "{{item.src}}", "fit": "cover" }
}{
"title": {
"text": "走马灯",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 0
},
"body": [
{
"type": "swiper",
"bind": "banners",
"height": 160,
"autoplay": true,
"interval": 2800,
"item": {
"type": "image",
"src": "{{item.src}}",
"fit": "cover",
"style": {
"width": "match",
"height": "match",
"radius": 0
}
}
},
{
"type": "column",
"style": {
"padding": 12,
"gap": 8
},
"children": [
{
"type": "notice",
"text": "走马灯可贴顶贴边。autoplay 默认开启。"
}
]
}
]
}UI
走马灯可贴顶贴边。autoplay 默认开启。
ImageViewer 图片查看器
全屏看图，盖在当前页上，不占正文布局。用 showIf 打开，点图片或遮罩关闭。点哪张缩略图，就把那张的下标写进 index。
| 参数名 | 类型 | 说明 |
|---|---|---|
| showIf | String | 为真时显示 |
| urls / images | Array | 图片路径列表 |
| index | Number | 打开时显示第几张，从 0 开始。可写 {{index}} |
| bind | String | 也可用数组字段代替 urls |
json
{ "type": "avatar", "src": "img/a.png", "value": 0, "onTap": "onOpen" }json
{ "type": "imageViewer", "showIf": "open", "index": "{{index}}", "urls": ["img/a.png", "img/b.png"] }js
Page({
data: { open: false, index: 0 },
onOpen(e) {
this.setData({ open: true, index: Number(e.value) || 0 });
}
});{
"title": {
"text": "图片查看器",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "row",
"style": {
"gap": 12
},
"children": [
{
"type": "avatar",
"src": "https://i.pravatar.cc/128?img=12",
"size": 56,
"value": 0,
"onTap": "onOpen"
},
{
"type": "avatar",
"src": "https://i.pravatar.cc/128?img=32",
"size": 56,
"value": 1,
"onTap": "onOpen"
},
{
"type": "image",
"src": "https://i.pravatar.cc/128?img=47",
"style": {
"width": 56,
"height": 56,
"radius": 8
},
"value": 2,
"onTap": "onOpen"
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "button",
"text": "打开查看器",
"onTap": "onOpen"
},
{
"type": "imageViewer",
"showIf": "open",
"index": "{{index}}",
"urls": [
"https://i.pravatar.cc/128?img=12",
"https://i.pravatar.cc/128?img=32",
"https://i.pravatar.cc/128?img=47",
"https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=800&h=360&q=80"
]
}
]
}UI
NoticeBar 通告栏
顶部提示条。默认单行滚动；scroll: false 时不滚动。
| 参数名 | 类型 | 说明 |
|---|---|---|
| text / title / label | String | 通告文案，支持 {{path}} |
| scroll | Boolean | 是否滚动，默认 true |
| style.background | String | 背景色，默认 #FFF7E8 |
json
{ "type": "noticeBar", "text": "系统将于今晚维护，期间任务会暂停。" }{
"title": {
"text": "通告栏",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "noticeBar",
"text": "系统将于今晚 23:00 维护，预计 30 分钟。维护期间任务会暂停。"
},
{
"type": "space",
"height": 8
},
{
"type": "noticeBar",
"text": "短文本不滚动也可以",
"scroll": false
}
]
}UI
Empty 空状态
占位提示。图标在文字上方；文字、图标都可以不写。列表为空时不会自动提示，把 Empty 写在列表旁即可。
| 参数名 | 类型 | 说明 |
|---|---|---|
| icon / src / url | String | 图标路径，支持 http(s) 或项目内图片 |
| text / title / label | String | 提示文案，可省略。支持 {{path}} |
| iconSize | Number | 图标边长 dp，默认 48。也可写在 style.iconSize |
json
{ "type": "empty", "icon": "img/empty.svg", "text": "暂无记录" }json
{ "type": "empty", "icon": "img/empty.svg" }{
"title": {
"text": "空状态",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "empty",
"icon": "img/like.svg",
"text": "暂无记录"
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "empty",
"icon": "img/xhs.svg",
"iconSize": 40
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "card",
"children": [
{
"type": "empty",
"text": "没有匹配的任务"
}
]
}
]
}UI
暂无记录没有匹配的任务
Loading 加载
转圈，可选文字。不要一进页就显示，用 showIf 交给 JS：列表滚到底时在 onReachBottom 里打开，请求结束后关掉。整页遮罩（不必在 JSON 里放节点）用 this.showLoading / this.hideLoading，见 页面事件 · 页面方法。
| 参数名 | 类型 | 说明 |
|---|---|---|
| text / title / label | String | 可选，转圈旁边的说明，支持 {{path}} |
json
{ "type": "loading", "text": "加载中", "showIf": "loading" }json
{ "type": "text", "text": "{{footer}}", "showIf": "noMore", "style": { "align": "center", "color": "#9AA8A6", "fontSize": 12 } }javascript
Page({
data: {
stats: [],
loading: false,
noMore: false,
footer: ''
},
onReachBottom() {
if (this.data.loading || this.data.noMore) {
return;
}
this.setData({ loading: true });
System.sleep(2000);
this.setData({ loading: false, noMore: true, footer: '—— 我是有底线的 ——' });
}
});预览里把列表滑到底：先出现加载，约 2 秒后显示底线文案。
{
"title": {
"text": "加载",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "list",
"bind": "stats",
"item": {
"type": "card",
"children": [
{
"type": "row",
"style": {
"gap": 10
},
"children": [
{
"type": "image",
"src": "{{item.icon}}",
"style": {
"width": 36,
"height": 36,
"radius": 8
}
},
{
"type": "column",
"style": {
"weight": 1,
"gap": 4
},
"children": [
{
"type": "text",
"text": "{{item.title}}",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "{{item.time}}"
}
]
},
{
"type": "tag",
"text": "{{item.status}}",
"style": {
"background": "#E6F4F1",
"color": "#006A65"
}
}
]
}
]
}
},
{
"type": "loading",
"text": "加载中",
"showIf": "loading"
},
{
"type": "text",
"text": "{{footer}}",
"showIf": "noMore",
"style": {
"align": "center",
"color": "#9AA8A6",
"fontSize": 12
}
}
]
}UI
今日关注 12 人
10:21
今日点赞 36 次
11:08
今日评论 8 条
14:02
今日收藏 5 个
15:40
今日转发 3 次
16:12
今日私信 4 条
17:20
今日浏览 90 次
18:01
今日停留 36 分钟
18:40
Skeleton 骨架屏
数据还没到时的占位，骨架条会呼吸闪动。配合 showIf 与真实内容互斥。
| 参数名 | 类型 | 说明 |
|---|---|---|
| rows | Number | 灰色条数量，默认 3 |
| avatar | Boolean | 是否显示圆形头像占位 |
| showIf | String | 为真时显示骨架 |
json
{ "type": "skeleton", "avatar": true, "rows": 3, "showIf": "loading" }{
"title": {
"text": "骨架屏",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "card",
"children": [
{
"type": "skeleton",
"avatar": true,
"rows": 3,
"showIf": "loading"
},
{
"type": "column",
"showIf": "ready",
"style": {
"gap": 8
},
"children": [
{
"type": "text",
"text": "运营A",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "今日关注 12 人，点赞 36 次。"
}
]
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "button",
"text": "加载中",
"size": "md",
"onTap": "onLoadMore"
},
{
"type": "button",
"text": "完成",
"size": "md",
"style": {
"background": "#5F6D6B"
},
"onTap": "onDone"
}
]
}
]
}UI
Collapse 折叠面板
可展开 / 收起的一组条目。accordion: true 时同时只开一项。展开内容可以是纯文字，也可以是 children 组件。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键。手风琴为字符串，否则为打开项的数组 |
| accordion | Boolean | 手风琴，默认 false |
| items / options | Array | { title, name, text, children, disabled } |
| value | String / Array | 默认打开的项 |
| onChange | String | 展开变化时调用 |
json
{
"type": "collapse",
"name": "open",
"accordion": true,
"items": [
{ "name": "a", "title": "什么是动态页面？", "text": "用 JSON 描述界面。" }
]
}{
"title": {
"text": "折叠面板",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "collapse",
"name": "open",
"accordion": true,
"items": [
{
"name": "a",
"title": "什么是动态页面？",
"text": "用 JSON 描述界面，page.js 填数据和事件。"
},
{
"name": "b",
"title": "如何刷新数据？",
"text": "调用 this.setData，对应节点会跟着变。"
},
{
"name": "c",
"title": "可以嵌组件吗？",
"children": [
{
"type": "notice",
"text": "折叠内容里可以继续放按钮、列表。"
}
]
}
]
}
]
}
]
}UI
用 JSON 描述界面，page.js 填数据和事件。
WebView 网页
在页面里嵌一块 HTML。远程地址写 http(s)，项目内文件写相对路径（和图片一样，如 html/help.html）。也可以直接写 html。不是独立浏览器，也不和 Page 通信；整页打开外链仍用 action: { type: "openUrl" }。
加载顺序：html 有值就用内联；否则看 src / url。
文档预览是网页里的 iframe：不少站点（含本站）禁止被嵌套，所以预览用同源示例页。手机里的 WebView 不受这个限制，可以直接打开 http(s)。
WebView 不能按内容自动撑高，请写出 style.height。不写时引擎默认 240dp。"match" / "100%" 铺满父级。块内自己滚动。
| 参数名 | 类型 | 说明 |
|---|---|---|
| src / url | String | 远程 http(s)，或项目内 HTML 路径。支持 {{path}} |
| html | String | 内联 HTML，优先于 src。支持 {{path}} |
| javascript | Boolean | 是否允许页内 JS，默认 true。不提供与 Page 的桥，也禁止读本地文件 |
| style.height | Number / String | 高度 dp，或 match / "100%"。不写默认 240 |
| style.radius | Number | 圆角 |
json
{ "type": "webview", "src": "https://doc.deeke.cn", "style": { "height": 360, "radius": 8 } }json
{ "type": "webview", "src": "html/help.html", "style": { "height": 280 } }json
{ "type": "webview", "html": "<h3>说明</h3><p>{{intro}}</p>", "javascript": false, "style": { "height": 200 } }{
"title": {
"text": "网页",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "notice",
"text": "远程页、项目文件、内联 HTML。高度写在 style.height。"
},
{
"type": "webview",
"src": "/v2/webview-remote.html",
"style": {
"height": 168,
"radius": 8
}
},
{
"type": "space",
"height": 8
},
{
"type": "webview",
"src": "html/help.html",
"javascript": false,
"style": {
"height": 120,
"radius": 8,
"background": "#FFFFFF"
}
},
{
"type": "space",
"height": 8
},
{
"type": "webview",
"html": "<div style=\"font-family:sans-serif;padding:12px;color:#191C1C\"><h3 style=\"margin:0 0 8px;font-size:16px\">说明</h3><p style=\"margin:0;color:#6F7978;font-size:13px;line-height:1.5\">{{intro}}</p></div>",
"javascript": false,
"style": {
"height": 100,
"radius": 8,
"background": "#FFFFFF"
}
}
]
}UI
远程页、项目文件、内联 HTML。高度写在 style.height。
反馈
盖在当前页上的弹层、对话框、气泡、轻提示和背景蒙层。
Popup 弹层
盖在当前页上的弹层，不是新页面。内容用 body / children，里面可以放表单、卡片、列表，也可以嵌 自定义组件。显示隐藏和其它组件一样：写 showIf，用 this.setData 改那个字段，或 this.showPopup('open') / this.hidePopup('open')（也可写弹层 id），见 页面事件 · 页面方法。遮罩跟弹层共用这个条件，点遮罩会把该字段写成 false。打开关闭自带过渡：底部上滑、顶部下滑、侧边滑入、居中缩放淡入，遮罩同时淡入淡出。
写在页面根上的 popups 里，或 body 里用 type: popup（同样画到最上层，不占正文布局）。
| 参数名 | 类型 | 说明 |
|---|---|---|
| showIf | String | 为真时显示弹层和遮罩 |
| id | String | 可选标记 |
| position | String | bottom（默认）/ top / left / right / center。也可用 上 下 左 右 中 |
| title | String | 有则显示顶栏（取消会把 showIf 写成 false） |
| mask | Boolean | 是否显示遮罩，默认 true |
| closeOnMask | Boolean | 点遮罩是否关闭，默认 true |
| width / height | Number / String | 数字 dp，或 "80%"。底部/顶部默认为满宽；侧边默认宽 80%；居中默认宽 80% |
| style.radius | Number | 圆角 dp，默认 12。只圆内侧：底部圆上面两角，顶部只圆下面两角（上面两角为 0），侧边圆内侧，居中四角都圆 |
| style.radiusTopLeft / radiusTopRight / radiusBottomRight / radiusBottomLeft | Number | 单独指定某一角 |
| style.background | String | 背景色，默认 #FFFFFF |
| style.borderColor | String | 边框颜色；只写颜色时宽度默认 1 |
| style.borderWidth | Number | 边框宽度 dp |
| body / children | Array | 弹层里的节点，和页面 body 一样。嵌自定义组件在这里写 { "type": "choose" }。见 组件结构 |
json
{
"body": [
{ "type": "button", "text": "编辑", "onTap": "onOpenForm" }
],
"popups": [
{
"title": "编辑备注",
"position": "bottom",
"showIf": "formOpen",
"body": [
{ "type": "textarea", "name": "remark", "label": "备注" },
{ "type": "button", "text": "保存", "onTap": "onSaveForm" }
]
}
]
}Page({
data: {
formOpen: false,
topOpen: false,
confirmOpen: false,
leftOpen: false,
remark: ''
},
onOpenForm() {
this.showPopup('formOpen');
},
onSaveForm() {
this.hidePopup('formOpen');
},
onOpenTop() {
this.showPopup('topOpen');
},
onCloseTop() {
this.hidePopup('topOpen');
},
onOpenConfirm() {
this.showPopup('confirmOpen');
},
onCloseConfirm() {
this.hidePopup('confirmOpen');
},
onOpenLeft() {
this.showPopup('leftOpen');
},
onCloseLeft() {
this.hidePopup('leftOpen');
}
});弹层
打开关闭都走 setData + showIf。点遮罩也会把对应字段写成 false。圆角、边框写在 style 里。
备注
弹层里要嵌自定义组件，写在 body 里。组件怎么写见 组件结构，和父页怎么传数据见 父页交互。
json
{
"popups": [
{
"title": "选关键词",
"position": "bottom",
"showIf": "open",
"body": [
{ "type": "choose", "id": "picker", "onConfirm": "onPicked" }
]
}
]
}自定义组件
{
"component": true,
"id": "choose",
"body": [
{
"type": "notice",
"text": "点快捷标签，或自己输入后再确定。"
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "tag",
"text": "美食",
"onTap": "pickFood",
"style": {
"background": "{{foodBg}}",
"color": "{{foodColor}}"
}
},
{
"type": "tag",
"text": "探店",
"onTap": "pickShop",
"style": {
"background": "{{shopBg}}",
"color": "{{shopColor}}"
}
},
{
"type": "tag",
"text": "直播",
"onTap": "pickLive",
"style": {
"background": "{{liveBg}}",
"color": "{{liveColor}}"
}
}
]
},
{
"type": "input",
"name": "keyword",
"label": "关键词",
"hint": "例如：美食"
},
{
"type": "button",
"text": "确定选用",
"onTap": "onOk"
}
]
}当前页面
{
"title": {
"text": "弹层嵌组件",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "notice",
"text": "自定义组件写在弹层 body 里。"
},
{
"type": "button",
"text": "弹窗选择",
"onTap": "onOpen"
},
{
"type": "notice",
"text": "选用 {{picked}}"
}
],
"popups": [
{
"title": "选关键词",
"position": "bottom",
"showIf": "open",
"body": [
{
"type": "choose",
"id": "picker",
"onConfirm": "onPicked"
}
]
}
]
}弹层嵌组件
自定义组件写在弹层 body 里。
选用 未选
ActionSheet 动作面板
从底部弹出一组操作。和 Popup 一样用 showIf 控制，点选项后关闭并触发 onChange。点遮罩或取消关闭。
| 参数名 | 类型 | 说明 |
|---|---|---|
| showIf | String | 为真时显示 |
| title | String | 顶部说明 |
| items / options | Array | { text, value } 或字符串 |
| name | String | 选中后写入 data 的键 |
| cancelText / cancel | String | 取消按钮文案，默认 取消 |
| onChange / onSelect | String | 点某一项时调用，e.value 为该项值 |
json
{
"type": "actionSheet",
"showIf": "open",
"title": "选择来源",
"items": [
{ "text": "拍照", "value": "camera" },
{ "text": "从相册选择", "value": "album" }
]
}{
"title": {
"text": "动作面板",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "button",
"text": "打开动作面板",
"onTap": "onOpen"
},
{
"type": "space",
"height": 8
},
{
"type": "notice",
"text": "已选：{{picked}}"
},
{
"type": "actionSheet",
"showIf": "open",
"title": "选择来源",
"name": "picked",
"cancelText": "取消",
"onChange": "onPick",
"items": [
{
"text": "拍照",
"value": "camera"
},
{
"text": "从相册选择",
"value": "album"
},
{
"text": "使用默认图",
"value": "default"
}
]
}
]
}UI
已选：未选
Dialog 对话框
居中确认框，带标题、说明和取消 / 确定。用 showIf 控制显示，点确定或取消会关掉并调用 onConfirm / onCancel。
| 参数名 | 类型 | 说明 |
|---|---|---|
| showIf | String | 为真时显示 |
| title | String | 标题 |
| text / message | String | 说明 |
| cancelText / cancel | String | 取消文案，默认 取消。hideCancel: true 只留确定 |
| confirmText / okText | String | 确定文案，默认 确定 |
| mask | Boolean | 遮罩，默认 true |
| closeOnMask | Boolean | 点遮罩关闭，默认 true |
| onConfirm | String | 点确定 |
| onCancel | String | 点取消或点遮罩 |
json
{
"type": "dialog",
"showIf": "open",
"title": "确认删除",
"text": "删除后无法恢复",
"onConfirm": "onOk"
}{
"title": {
"text": "对话框",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "button",
"text": "删除确认",
"onTap": "onOpen"
},
{
"type": "notice",
"text": "结果 {{result}}"
},
{
"type": "dialog",
"showIf": "open",
"title": "确认删除",
"text": "删除后无法恢复，是否继续？",
"cancelText": "取消",
"confirmText": "删除",
"onConfirm": "onOk",
"onCancel": "onNo"
}
]
}UI
结果 未操作
Modal 弹窗
居中弹出的内容容器，里面可以放表单、按钮。和 Popup position: "center" 同类，默认居中。用 showIf 控制。
| 参数名 | 类型 | 说明 |
|---|---|---|
| showIf | String | 为真时显示 |
| title | String | 有则显示顶栏 |
| body / children | Array | 弹窗内容 |
| mask | Boolean | 默认 true |
| closeOnMask | Boolean | 点遮罩关闭，默认 true |
| width / height | Number / String | 默认宽约 80% |
{
"title": {
"text": "弹窗",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "button",
"text": "打开弹窗",
"onTap": "onOpen"
},
{
"type": "modal",
"showIf": "open",
"title": "编辑备注",
"body": [
{
"type": "textarea",
"name": "remark",
"hint": "请输入备注",
"minLines": 3
},
{
"type": "button",
"text": "保存",
"onTap": "onSave"
}
]
}
]
}UI
Popover 气泡弹出框
小气泡说明，贴在某个按钮或组件旁边，不是铺满屏幕底。四个角都是圆角，默认带指向触发组件的箭头。for / anchor 写触发组件的 id；不写则贴在最后点的那个组件旁。position 是相对触发组件的方向。
| 参数名 | 类型 | 说明 |
|---|---|---|
| showIf | String | 为真时显示 |
| for / anchor / target | String | 贴在哪个组件旁，对应那个组件的 id |
| text / title | String | 气泡文案 |
| position | String | 相对触发组件：bottom（默认，在下方）/ top / left / right / center |
| arrow | Boolean | 是否显示箭头，默认 true。position: center 时不显示 |
| mask | Boolean | 默认 true，点遮罩关闭 |
| style.background | String | 气泡底色，默认 #191C1C |
| style.color | String | 文案颜色，默认白色 |
| style.radius | Number | 圆角，默认 8，四个角相同 |
| body / children | Array | 可选，气泡里再放组件 |
json
{ "type": "button", "id": "tip", "text": "显示说明", "onTap": "onOpen" }json
{ "type": "popover", "for": "tip", "showIf": "open", "text": "点这里可以筛选", "position": "bottom" }json
{
"type": "popover",
"for": "tip",
"showIf": "open",
"position": "top",
"text": "浅色气泡",
"style": { "background": "#FFFFFF", "color": "#191C1C" }
}{
"title": {
"text": "气泡弹出框",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "notice",
"text": "贴在按钮旁边，带箭头，四个角都是圆角。"
},
{
"type": "space",
"height": 40
},
{
"type": "button",
"id": "above",
"text": "上方弹出",
"onTap": "onAbove"
},
{
"type": "space",
"height": 12
},
{
"type": "button",
"id": "below",
"text": "下方弹出",
"onTap": "onBelow"
},
{
"type": "space",
"height": 12
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "button",
"id": "aside",
"text": "右侧弹出",
"onTap": "onRight"
},
{
"type": "button",
"id": "light",
"text": "浅色气泡",
"onTap": "onLight"
}
]
},
{
"type": "space",
"height": 12
},
{
"type": "button",
"id": "nomask",
"text": "无遮罩",
"onTap": "onNomask"
},
{
"type": "popover",
"for": "below",
"showIf": "below",
"position": "bottom",
"text": "默认深色气泡，出现在按钮下方。"
},
{
"type": "popover",
"for": "above",
"showIf": "above",
"position": "top",
"text": "出现在按钮上方。"
},
{
"type": "popover",
"for": "aside",
"showIf": "aside",
"position": "right",
"text": "出现在按钮右侧。"
},
{
"type": "popover",
"for": "light",
"showIf": "light",
"position": "bottom",
"text": "浅色气泡，白底深字。",
"style": {
"background": "#FFFFFF",
"color": "#191C1C"
}
},
{
"type": "popover",
"for": "nomask",
"showIf": "nomask",
"position": "bottom",
"mask": false,
"text": "不盖遮罩，可继续点页面。再点一次按钮关闭。"
}
]
}UI
贴在按钮旁边，带箭头，四个角都是圆角。
Toast 轻提示
短文案提示，不打断操作。两种用法：
- 页面方法
this.toast('保存成功')或action: { type: "toast", text: "..." }，约 1.6 秒后消失 - 组件
type: "toast"+showIf，自己控制显示隐藏
| 参数名 | 类型 | 说明 |
|---|---|---|
| showIf | String | 组件用法：为真时显示 |
| text / title | String | 提示文案 |
| position | String | center（默认）/ top / bottom |
| mask | Boolean | 默认 false |
json
{ "type": "button", "text": "保存", "action": { "type": "toast", "text": "已保存" } }{
"title": {
"text": "轻提示",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "button",
"text": "this.toast()",
"onTap": "onApi"
},
{
"type": "button",
"text": "组件 Toast",
"onTap": "onNode"
},
{
"type": "toast",
"showIf": "show",
"text": "已复制到剪贴板",
"position": "center"
}
]
}UI
Mask 背景蒙层
盖住整页的半透明层。和弹层自带的遮罩不同：Mask 是独立组件，用来压暗背景、阻止误点，也可以在上面叠加载、按钮。用 showIf 控制显示。别名 overlay。
| 参数名 | 类型 | 说明 |
|---|---|---|
| showIf | String | 为真时显示 |
| opacity | Number | 透明度 0～1，默认 0.4。大于 1 时按百分数，如 45 即 45% |
| color | String | black（默认）/ white，或 #RRGGBB / #AARRGGBB |
| style.background | String | 直接指定蒙层色，优先于 color / opacity |
| closeOnTap / closeOnMask | Boolean | 点空白是否关闭，默认 true |
| onTap | String | 点空白时调用 |
| body / children | Array | 叠在蒙层上的内容，点内容不会关闭 |
json
{ "type": "mask", "showIf": "open", "opacity": 0.45 }json
{
"type": "mask",
"showIf": "busy",
"closeOnTap": false,
"children": [{ "type": "loading", "text": "正在同步…" }]
}{
"title": {
"text": "背景蒙层",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "notice",
"text": "盖住整页。点空白关闭；也可以在蒙层上叠内容。"
},
{
"type": "button",
"text": "打开蒙层",
"onTap": "onOpen"
},
{
"type": "button",
"text": "白色半透明",
"onTap": "onWhite"
},
{
"type": "button",
"text": "蒙层上放加载",
"onTap": "onBusy"
},
{
"type": "mask",
"showIf": "open",
"opacity": 0.45,
"onTap": "onDim"
},
{
"type": "mask",
"showIf": "white",
"color": "white",
"opacity": 0.7
},
{
"type": "mask",
"showIf": "busy",
"opacity": 0.45,
"closeOnTap": false,
"children": [
{
"type": "card",
"children": [
{
"type": "loading",
"text": "正在同步…"
},
{
"type": "space",
"height": 8
},
{
"type": "button",
"text": "关闭",
"onTap": "onCloseBusy"
}
]
}
]
}
]
}UI
盖住整页。点空白关闭；也可以在蒙层上叠内容。
布局
行列、卡片、间距、列表、宫格。把一组组件打包复用见 组件结构。
Divider 分割线
横向细线，用来隔开两段内容。
json
{ "type": "divider" }{
"title": {
"text": "分割线",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "text",
"text": "上一段"
},
{
"type": "divider"
},
{
"type": "text",
"text": "下一段"
}
]
}
]
}UI
上一段
下一段
Space 间距
空白占位，用 height 控制高度（dp）。
| 参数名 | 类型 | 说明 |
|---|---|---|
| height | Number | 高度 dp，默认约 8 |
json
{ "type": "space", "height": 12 }{
"title": {
"text": "间距",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"children": [
{
"type": "text",
"text": "上方"
},
{
"type": "space",
"height": 16
},
{
"type": "text",
"text": "中间隔了 16dp"
},
{
"type": "space",
"height": 32
},
{
"type": "text",
"text": "再隔 32dp"
}
]
}
]
}UI
上方
中间隔了 16dp
再隔 32dp
Row 横向
横向排列子项。weight 撑开子项。valign：top / center / bottom，默认垂直居中。
| 参数名 | 类型 | 说明 |
|---|---|---|
| children | Array | 子组件 |
| style.gap | Number | 子项间距 dp |
| style.valign | String | top / center / bottom |
| style.weight | Number | 子项在 row 里的权重，写在子项 style 上 |
{
"title": {
"text": "今日",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"body": [
{
"type": "card",
"children": [
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "text",
"text": "关注",
"style": {
"weight": 1
}
},
{
"type": "text",
"text": "{{today}}"
}
]
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "text",
"text": "点赞",
"style": {
"weight": 1
}
},
{
"type": "text",
"text": "{{like}}"
}
]
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "text",
"text": "评论",
"style": {
"weight": 1
}
},
{
"type": "text",
"text": "{{comment}}"
}
]
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "text",
"text": "失败",
"style": {
"weight": 1
}
},
{
"type": "text",
"text": "{{fail}}"
}
]
}
]
}
]
}UI
关注
128
点赞
36
评论
8
失败
2
页面第一层可吸顶 / 吸底（style.sticky）：
{
"title": {
"text": "布局",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "row",
"style": {
"gap": 8,
"sticky": "top",
"background": "#FFFFFF",
"padding": 8,
"radius": 8
},
"children": [
{
"type": "text",
"text": "吸顶栏",
"style": {
"weight": 1,
"fontWeight": "bold"
}
},
{
"type": "button",
"text": "查询",
"size": "中",
"action": {
"type": "toast",
"text": "已查询"
}
}
]
},
{
"type": "column",
"style": {
"height": "100%",
"align": "center",
"valign": "center",
"gap": 8
},
"children": [
{
"type": "text",
"text": "垂直居中",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "height 100% + valign center"
}
]
},
{
"type": "row",
"style": {
"sticky": "bottom",
"gap": 8,
"background": "#FFFFFF",
"padding": 8,
"radius": 8
},
"children": [
{
"type": "button",
"text": "取消",
"size": "中",
"style": {
"weight": 1,
"background": "#EEF2F1",
"color": "#006A65"
},
"action": {
"type": "toast",
"text": "已取消"
}
},
{
"type": "button",
"text": "确定",
"size": "中",
"style": {
"weight": 1
},
"action": {
"type": "toast",
"text": "已确定"
}
}
]
}
]
}UI
吸顶栏
垂直居中
height 100% + valign center
Column 纵向
纵向排列子项。在一屏内居中时设 height: "100%"，再写 align / valign。
| 参数名 | 类型 | 说明 |
|---|---|---|
| children | Array | 子组件 |
| style.gap | Number | 子项间距 dp |
| style.align | String | 子项水平位置：left / center / right |
| style.valign | String | 子项垂直位置：top / center / bottom |
| style.height | Number / String | "100%" 占满可见区域，配合 valign 居中 |
{
"title": {
"text": "纵向",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "column",
"style": {
"gap": 8
},
"children": [
{
"type": "card",
"children": [
{
"type": "text",
"text": "第一块"
}
]
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "第二块"
}
]
},
{
"type": "card",
"children": [
{
"type": "text",
"text": "第三块"
}
]
}
]
}
]
}UI
第一块
第二块
第三块
页面 title 为对象，可改文案、背景，或 hidden 隐藏。字段见 页面结构。
{
"title": {
"text": "无标题",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65",
"hidden": true
},
"statusBar": {
"background": "#F5F5F5",
"color": "dark"
},
"style": {
"background": "#F5F5F5",
"padding": 12
},
"body": [
{
"type": "title",
"text": "无导航栏"
},
{
"type": "notice",
"text": "title.hidden 为 true，或根本不写 title，都不显示顶部导航栏。"
}
]
}隐藏导航栏
无导航栏
title.hidden 为 true，或根本不写 title，都不显示顶部导航栏。
{
"title": {
"text": "深色顶栏",
"align": "center",
"fontSize": 17,
"fontWeight": "bold",
"color": "#F4EFE6",
"background": "#191C1C"
},
"statusBar": {
"background": "#191C1C",
"color": "light"
},
"style": {
"background": "#FFF8E7",
"padding": 12
},
"body": [
{
"type": "notice",
"text": "导航栏对象可改文案、对齐、字号、颜色和背景。"
}
]
}自定义顶栏
导航栏对象可改文案、对齐、字号、颜色和背景。
Card 卡片
白底圆角容器，可整体绑定 action。
{
"title": {
"text": "卡片",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"action": {
"type": "toast",
"text": "DeekeScript"
},
"children": [
{
"type": "image",
"src": "https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=800&h=360&q=80",
"fit": "cover",
"style": {
"height": 88,
"radius": 8
}
},
{
"type": "text",
"text": "DeekeScript",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "用脚本驱动 Android 自动化"
}
]
},
{
"type": "card",
"action": {
"type": "toast",
"text": "点击控件"
},
"children": [
{
"type": "row",
"style": {
"gap": 10
},
"children": [
{
"type": "image",
"src": "img/dy.svg",
"style": {
"width": 40,
"height": 40,
"radius": 10
}
},
{
"type": "column",
"style": {
"weight": 1,
"gap": 2
},
"children": [
{
"type": "text",
"text": "点击控件",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "脚本A · 10:21"
}
]
},
{
"type": "tag",
"text": "运行中",
"style": {
"background": "#FFF4E5",
"color": "#B25E09"
}
}
]
}
]
},
{
"type": "card",
"action": {
"type": "toast",
"text": "小红书笔记"
},
"children": [
{
"type": "row",
"style": {
"gap": 10
},
"children": [
{
"type": "image",
"src": "img/xhs.svg",
"style": {
"width": 40,
"height": 40,
"radius": 10
}
},
{
"type": "column",
"style": {
"weight": 1,
"gap": 2
},
"children": [
{
"type": "text",
"text": "小红书笔记",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "运营B · 10:40"
}
]
},
{
"type": "tag",
"text": "排队",
"style": {
"background": "#EEF2F1",
"color": "#6F7978"
}
}
]
}
]
}
]
}普通卡片
DeekeScript
用脚本驱动 Android 自动化
点击控件
脚本A · 10:21
小红书笔记
运营B · 10:40
写上 name 和 value 后变成可选中卡片：同一 name 对应 data 里的字段，选中后底色变成浅绿并带边框。卡片本身不改选中态，要点了之后在 page.js 里 setData，其它卡片才会跟着变。multiple: true 时值为数组，可多选。
| 参数名 | 类型 | 说明 |
|---|---|---|
| name | String | 对应 data 中的键，用来判断哪张卡是选中态 |
| value | String | 该卡片代表的选项值 |
| multiple | Boolean | true 为多选，值为数组；默认多选一 |
| selectedBackground | String | 选中底色，默认 #E6F2F0 |
| onTap | String | 轻触时调用的 Page 方法，e.value 是该卡片的 value |
json
{
"type": "card",
"name": "plan",
"value": "month",
"onTap": "onSelectPlan",
"style": { "weight": 1 },
"children": [{ "type": "text", "text": "月卡" }]
}javascript
Page({
data: {
plan: 'year',
apps: ['xhs']
},
onSelectPlan(e) {
this.setData({ plan: e.value });
},
onToggleApp(e) {
var apps = this.data.apps ? this.data.apps.slice() : [];
var i = apps.indexOf(e.value);
if (i >= 0) {
apps.splice(i, 1);
} else {
apps.push(e.value);
}
this.setData({ apps: apps });
}
});Page({
data: {
plan: 'year',
apps: ['xhs']
},
onSelectPlan(e) {
this.setData({ plan: e.value });
},
onToggleApp(e) {
var apps = this.data.apps ? this.data.apps.slice() : [];
var i = apps.indexOf(e.value);
if (i >= 0) {
apps.splice(i, 1);
} else {
apps.push(e.value);
}
this.setData({ apps: apps });
}
});选择卡片
点击走 page.js 的 onSelectPlan：setData 改 plan，其他卡选中态跟着变。
月卡
¥29
按月续费
年卡
¥199
省 40%
买断
¥399
一次买断
当前套餐 year
multiple: true 可多选
小红书
抖音
快手
已选 ["xhs"]
List 列表
按 bind 指向的数组逐条渲染。item 为模板。循环内使用 {{item.xxx}}、{{index}}。"direction": "row" 横排。
数组为空时不渲染行。空提示请用 Empty 自己摆。
整页滚到底调用 Page.onReachBottom。触底后由 JS 打开 loading；没有更多数据时关掉转圈，并用 setData 写下底线文案。
| 参数名 | 类型 | 说明 |
|---|---|---|
| bind | String | 数据路径，对应 data 中的数组，如 "tasks" 或 "item.tags" |
| id | String | 未写 bind 时当作 bind |
| item | Object / Array | 每一项的组件模板。数组则包一层 column |
| onScroll / onReachBottom / onReachTop | String | 该列表的滚动事件。整页到底用 Page.onReachBottom |
| children | Array | 未写 item 时作为模板 |
| direction | String | column（默认）或 row |
| style.gap | Number | 行间距 dp，默认 8 |
{
"title": {
"text": "统计",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "title",
"text": "{{heading}}"
},
{
"type": "notice",
"text": "{{summary}}"
},
{
"type": "list",
"bind": "stats",
"onReachBottom": "onReachBottom",
"item": {
"type": "card",
"onTap": "onItemTap",
"action": {
"type": "navigate",
"page": "detail",
"params": {
"id": "{{item.id}}"
}
},
"children": [
{
"type": "row",
"style": {
"gap": 10
},
"children": [
{
"type": "image",
"src": "{{item.icon}}",
"style": {
"width": 36,
"height": 36,
"radius": 8
}
},
{
"type": "column",
"style": {
"weight": 1,
"gap": 4
},
"children": [
{
"type": "text",
"text": "{{item.title}}",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "{{item.time}}"
}
]
},
{
"type": "tag",
"text": "{{item.status}}",
"style": {
"background": "#E6F4F1",
"color": "#006A65"
}
}
]
}
]
}
},
{
"type": "loading",
"text": "加载中",
"showIf": "loading"
},
{
"type": "text",
"text": "{{footer}}",
"showIf": "noMore",
"style": {
"align": "center",
"color": "#9AA8A6",
"fontSize": 12
}
}
]
}UI
张三 的数据
共 8 条
今日关注 12 人
10:21
今日点赞 36 次
11:08
今日评论 8 条
14:02
今日收藏 5 个
15:40
今日转发 3 次
16:12
今日私信 4 条
17:20
今日浏览 90 次
18:01
今日停留 36 分钟
18:40
| 模板 | 含义 |
|---|---|
{{item.title}} | 当前项字段 |
{{item.id}} | 当前项 id |
{{index}} | 下标，从 0 开始 |
任务列表
item 内可嵌套 row / button / showIf。onTap 调用 Page 方法，e 含 item、index。运行任务用 Engines.executeScript，见 执行脚本。
{
"title": {
"text": "任务",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "title",
"text": "今日任务"
},
{
"type": "list",
"bind": "tasks",
"item": {
"type": "card",
"onTap": "onItemTap",
"onLongPress": "onItemLongPress",
"children": [
{
"type": "row",
"style": {
"gap": 10
},
"children": [
{
"type": "image",
"src": "{{item.icon}}",
"style": {
"width": 36,
"height": 36,
"radius": 8
}
},
{
"type": "text",
"text": "{{item.title}}",
"style": {
"weight": 1,
"fontWeight": "bold"
}
},
{
"type": "tag",
"text": "{{item.status}}",
"style": {
"background": "#E6F4F1",
"color": "#006A65"
}
}
]
},
{
"type": "notice",
"text": "{{item.user}} · {{item.time}}"
},
{
"type": "notice",
"text": "置顶",
"showIf": "item.pinned",
"style": {
"color": "#006A65"
}
},
{
"type": "row",
"style": {
"gap": 8
},
"children": [
{
"type": "button",
"text": "详情",
"size": "中",
"action": {
"type": "navigate",
"page": "detail",
"params": {
"id": "{{item.id}}"
}
}
},
{
"type": "button",
"text": "运行",
"size": "中",
"onTap": "onRun"
}
]
}
]
}
},
{
"type": "loading",
"text": "加载中",
"showIf": "loading"
},
{
"type": "text",
"text": "{{footer}}",
"showIf": "noMore",
"style": {
"align": "center",
"color": "#9AA8A6",
"fontSize": 12
}
}
]
}UI
今日任务
抖音养号
运行中运营A · 10:21
置顶
小红书笔记
排队运营B · 10:40
快手评论
已完成运营A · 09:12
视频号私信
失败运营C · 08:55
数据回传
排队运营B · 08:30
置顶
嵌套
{{item.user.name}} 取内层字段。内层 list 的 bind 可写 item.tags；内层循环中 {{item}} 为当前内层项。
{
"title": {
"text": "动态",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "title",
"text": "最新动态"
},
{
"type": "list",
"bind": "feeds",
"item": {
"type": "card",
"children": [
{
"type": "row",
"style": {
"gap": 10
},
"children": [
{
"type": "image",
"src": "{{item.user.avatar}}",
"fit": "cover",
"style": {
"width": 36,
"height": 36,
"radius": 18
}
},
{
"type": "column",
"style": {
"weight": 1,
"gap": 2
},
"children": [
{
"type": "text",
"text": "{{item.user.name}}",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "{{item.city}} · {{item.time}}"
}
]
}
]
},
{
"type": "text",
"text": "{{item.content}}"
},
{
"type": "list",
"direction": "row",
"bind": "item.tags",
"style": {
"gap": 6
},
"item": {
"type": "tag",
"text": "{{item}}"
}
}
]
}
},
{
"type": "loading",
"text": "加载中",
"showIf": "loading"
},
{
"type": "text",
"text": "{{footer}}",
"showIf": "noMore",
"style": {
"align": "center",
"color": "#9AA8A6",
"fontSize": 12
}
}
]
}UI
最新动态
张三
武汉 · 2 分钟前
今天关注了 12 个目标用户。
关注养号
李四
杭州 · 16 分钟前
笔记已发布，等待曝光。
小红书
王五
广州 · 1 小时前
评论任务完成，失败 1 条。
评论复盘
赵六
成都 · 昨天
私信模板已更新。
私信
Grid + List
同一页多个 bind 互不影响。
{
"title": {
"text": "工作台",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "title",
"text": "{{boardName}}"
},
{
"type": "grid",
"bind": "metrics",
"columns": 2,
"item": {
"type": "card",
"children": [
{
"type": "notice",
"text": "{{item.label}}"
},
{
"type": "title",
"text": "{{item.value}}",
"style": {
"color": "#006A65"
}
}
]
}
},
{
"type": "space",
"height": 8
},
{
"type": "text",
"text": "最近记录",
"style": {
"fontWeight": "bold"
}
},
{
"type": "list",
"bind": "logs",
"item": {
"type": "card",
"children": [
{
"type": "row",
"children": [
{
"type": "text",
"text": "{{item.title}}",
"style": {
"weight": 1
}
},
{
"type": "tag",
"text": "{{item.result}}",
"style": {
"background": "#E6F4F1",
"color": "#006A65"
}
}
]
},
{
"type": "notice",
"text": "{{item.time}} · 第 {{index}} 条"
}
]
}
},
{
"type": "loading",
"text": "加载中",
"showIf": "loading"
},
{
"type": "text",
"text": "{{footer}}",
"showIf": "noMore",
"style": {
"align": "center",
"color": "#9AA8A6",
"fontSize": 12
}
}
]
}UI
今日工作台
运行中
3
已完成
128
排队
8
失败
2
最近记录
点击控件
成功16:12 · 第 0 条
图色查找
成功15:40 · 第 1 条
循环任务
失败14:02 · 第 2 条
定时执行
成功11:08 · 第 3 条
日志回传
成功10:21 · 第 4 条
Grid 宫格
columns 为一行列数。入口卡片图片 "width": "50%"，按正方形等比缩放。只写宽或只写高均保持正方形。
| 参数名 | 类型 | 说明 |
|---|---|---|
| bind | String | 数据路径，对应 data 中的数组 |
| id | String | 未写 bind 时当作 bind |
| columns | Number | 列数 |
| item | Object | 格子模板 |
| empty | String | 数组为空时的提示 |
| style.gap | Number | 格子间距 dp，默认 8。图文间距用 item 卡片的 style.gap，默认 12 |
{
"title": {
"text": "功能",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "text",
"text": "一行三个",
"style": {
"fontWeight": "bold"
}
},
{
"type": "grid",
"bind": "apps",
"columns": 3,
"item": {
"type": "card",
"action": {
"type": "navigate",
"page": "task",
"params": {
"id": "{{item.id}}"
}
},
"style": {
"padding": 8,
"gap": 8
},
"children": [
{
"type": "image",
"src": "{{item.icon}}",
"style": {
"width": "50%"
}
},
{
"type": "text",
"text": "{{item.name}}",
"style": {
"fontSize": 11,
"align": "center"
}
}
]
}
}
]
}一行三个
一行三个
抖音养号
小红书
快手评论
视频号
直播间
数据看板
{
"title": {
"text": "功能",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "text",
"text": "一行四个",
"style": {
"fontWeight": "bold"
}
},
{
"type": "grid",
"bind": "apps",
"columns": 4,
"item": {
"type": "card",
"action": {
"type": "navigate",
"page": "task",
"params": {
"id": "{{item.id}}"
}
},
"style": {
"padding": 8,
"gap": 8
},
"children": [
{
"type": "image",
"src": "{{item.icon}}",
"style": {
"width": "50%"
}
},
{
"type": "text",
"text": "{{item.name}}",
"style": {
"fontSize": 11,
"align": "center"
}
}
]
}
}
]
}一行四个
一行四个
养号
笔记
评论
私信
直播
数据
粉丝
设置
{
"title": {
"text": "概览",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"background": "#F5F5F5"
},
"body": [
{
"type": "grid",
"bind": "metrics",
"columns": 2,
"item": {
"type": "card",
"children": [
{
"type": "notice",
"text": "{{item.label}}"
},
{
"type": "title",
"text": "{{item.value}}",
"style": {
"color": "#006A65"
}
}
]
}
},
{
"type": "notice",
"text": "grid 用 columns 控制列数，这里是 2 列。"
}
]
}UI
关注
128
点赞
36
评论
8
失败
2
grid 用 columns 控制列数，这里是 2 列。