通用
先看清 页面结构 再来挑组件。body 是组件数组,可以嵌套 children。内容区的 padding / margin / background 写在页面或入口 window 的 style 里,见 配置。
组件、接口与能力的完整可运行示例,请在手机端 DeekeScript Pro 底栏「示例」中查看。源码:deekeScriptV2Demo。
单个组件的字段和预览在分类页。本页只写所有组件都能用的字段。
| 分类 | 有什么 |
|---|---|
| 基础 | 文案、图片、头像、按钮、省略、徽标 |
| 表单 | 输入、搜索框、选择、日期时间、步进器、评分、滑动条、图片上传 |
| 导航 | 选项卡、分段、导航栏、侧边栏、序列、步骤、底栏、分页符 |
| 展示 | 走马灯、查看器、通告栏、空状态、加载、骨架屏、进度、网页、折叠面板 |
| 反馈 | 弹层、对话框、弹窗、气泡、动作面板、轻提示、背景蒙层 |
| 布局 | 行列、卡片、列表、宫格 |
把一组内置组件打包复用,见 自定义组件。
所有组件都能写的字段和样式。颜色、背景、圆角、宽高写在 style 里,不要和 type 写在同一层。button 不写 style.background 则跟入口 window.theme.primary(未配置为 #006A65)。
整站换色:在 deekeScript.json 写 "window": { "theme": { "primary": "#1565C0" } }。slider / switch / 输入框焦点 / checkbox / radio / 默认按钮会一起变。搜索框默认灰边白底,不跟主题色刷底。 导航栏、状态栏、底栏仍要单独写,见 配置。
Common 通用字段
| 参数名 | 类型 | 说明 |
|---|---|---|
| type | String | 组件类型 |
| id | String | 可选。列表使用 bind,文案使用 {{字段}} |
| hidden | Boolean | 隐藏 |
| showIf | String | 条件显示,值为作用域路径 |
| action | Object | 轻触后的动作。type 为 navigate / redirect / switchTab / back / toast / save / openUrl,见 页面结构 · JSON action |
| 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 是新值。写在 list / grid 行内时还有 e.item、e.index;写了 name 时有 e.name |
| onFocus / onBlur | String | 输入框获得 / 失去焦点 |
| style | Object | 样式。background / color / 宽高都写在这里,不要和 type 同级 |
轻触用 onTap(也认 onClick),双击用 onDoubleTap,长按用 onLongPress。与 action 同时写时先调 JS 再执行 action,见 页面结构 · JSON action。没有 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 里的权重 |
