Skip to content

通用 ​

先看清 页面结构 再来挑组件。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 通用字段 ​

参数名类型说明
typeString组件类型
idString可选。列表使用 bind,文案使用 {{字段}}
hiddenBoolean隐藏
showIfString条件显示,值为作用域路径
actionObject轻触后的动作。type 为 navigate / redirect / switchTab / back / toast / save / openUrl,见 页面结构 · JSON action
onTapString轻触一次时调用的方法名。onClick 视为同一事件
onDoubleTapString连续轻触两次
onLongPressString按住不放
onScrollStringlist / grid:页面滚动且该组件在可见区域时调用
onReachBottomStringlist / grid:该组件底部滚到可视区底部时调用。整页到底见 Page.onReachBottom
onReachTopStringlist / grid:该组件顶部滚到可视区顶部时调用
onChangeStringinput / 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 / onBlurString输入框获得 / 失去焦点
styleObject样式。background / color / 宽高都写在这里,不要和 type 同级

轻触用 onTap(也认 onClick),双击用 onDoubleTap,长按用 onLongPress。与 action 同时写时先调 JS 再执行 action,见 页面结构 · JSON action。没有 onTouchStart / onTouchMove / onTouchEnd,底层触摸会和滚动打架,这套 JSON 界面不需要。

Style 样式 ​

颜色使用 #RRGGBB 或 #AARRGGBB。宽高数字单位是 dp,字体是 sp。

参数名类型说明
widthNumber / String数字 dp,或 match / wrap / "50%" / "100%"。100% 与 match 一样,占满父级;页面根上就是一屏宽
heightNumber / String同上。100% / match 占满父级高度;页面根上就是可见区域(标题栏 / 底栏之间)
minWidth / minHeightNumber / String最小宽高
paddingNumber四边内边距 dp
paddingTop / paddingRight / paddingBottom / paddingLeftNumber单边内边距
marginNumber四边外边距 dp
marginTop / marginRight / marginBottom / marginLeftNumber单边外边距
backgroundString背景色
radiusNumber圆角 dp
fontSizeNumber字号
colorString文字颜色
fontWeightStringbold / 默认
alignString水平:left / center / right。文字对齐,或 column 里子项水平位置
valignString垂直:top / center / bottom。row 默认垂直居中;column 设 center 且 height: "100%" 可把内容摆在屏幕中间
stickyStringtop 吸顶,bottom 吸底。只对页面 body 第一层有效,滚动时固定
opacityNumber0~1
gapNumbercolumn / row / list / card 子项间距;grid 卡片默认 12
weightNumber在 row / 撑满高度的 column 里的权重