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

展示

走马灯、查看器、通告栏、空状态、加载、骨架屏、进度条、进度圈、折叠面板、网页。

Swiper 走马灯

多个 banner 左右切换。页面 padding 写成 0 并放在 body 最前，即可贴顶贴边。autoplay 默认开启，interval 为毫秒。点当前屏会走 item 上的 onTap / action（也认数据项上同名字段），e.item、e.index 可用。

参数名	类型	说明
bind	String	数据路径，对应 data 中的数组
items	Array	未写 bind 时的静态项
item	Object	每一屏的组件模板
height	Number	高度 dp，默认 140
autoplay	Boolean	是否自动播放，默认 true
interval	Number	自动播放间隔毫秒，默认约 3000
onTap / onClick	String	写在 item（或数据项）上，点当前屏时调用
action	Object	写在 item（或数据项）上，点当前屏时执行

{
  "type": "swiper",
  "bind": "banners",
  "height": 140,
  "autoplay": true,
  "interval": 2800,
  "item": { "type": "image", "src": "{{item.src}}", "fit": "cover", "onTap": "onBanner" }
}

ImageViewer 图片查看器

全屏看图，盖在当前页上，不占正文布局。用 showIf 打开，点图片或遮罩关闭。点哪张缩略图，就把那张的下标写进 index。

参数名	类型	说明
showIf	String	为真时显示
urls / images	Array	图片路径列表
index	Number	打开时显示第几张，从 0 开始。可写 {{index}}
bind	String	也可用数组字段代替 urls

{ "type": "avatar", "src": "img/a.png", "value": 0, "onTap": "onOpen" }

{ "type": "imageViewer", "showIf": "open", "index": "{{index}}", "urls": ["img/a.png", "img/b.png"] }

Page({
  data: { open: false, index: 0 },
  onOpen(e) {
    this.setData({ open: true, index: Number(e.value) || 0 });
  }
});

NoticeBar 通告栏

顶部提示条。默认单行滚动；scroll: false 时不滚动。

参数名	类型	说明
text / title / label	String	通告文案，支持 {{path}}
scroll	Boolean	是否滚动，默认 true
style.background	String	背景色，默认 #FFF7E8
style.color	String	文字颜色

{ "type": "noticeBar", "text": "系统将于今晚维护，期间任务会暂停。" }

{ "type": "noticeBar", "text": "蓝色通告栏", "scroll": false, "style": { "background": "#E3F2FD", "color": "#1565C0" } }

Empty 空状态

占位提示。图标在文字上方；文字、图标都可以不写。列表为空时不会自动提示，把 Empty 写在列表旁即可。

参数名	类型	说明
icon / src / url	String	图标路径，支持 http(s) 或项目内图片
text / title / label	String	提示文案，可省略。支持 {{path}}
iconSize	Number	图标边长 dp，默认 48。也可写在 style.iconSize
style.color	String	文案颜色。不写则为灰色 #9AA8A6

{ "type": "empty", "icon": "img/empty.svg", "text": "暂无记录" }

{ "type": "empty", "icon": "img/empty.svg" }

{ "type": "empty", "text": "蓝色空状态", "style": { "color": "#1565C0" } }

Loading 加载

几种常见加载效果。嵌在页面里用 type: loading；整页遮罩不必写节点，调用 this.showLoading / this.hideLoading，见 页面事件 · 页面方法。列表滚到底再出转圈，仍用 showIf，见 List。

参数名	类型	说明
text / title / label	String	可选说明，支持 {{path}}
mode	String	row 横向转圈（默认）；column 转圈在上；dots 三点跳动
size	Number	转圈边长，默认 18；column 时默认 28
style.color	String	转圈 / 三点颜色。不写则跟 window.theme.primary

{ "type": "loading", "text": "加载中" }

{ "type": "loading", "text": "蓝色加载", "style": { "color": "#1565C0" } }

{ "type": "loading", "mode": "column", "text": "正在同步…", "size": 28 }

{ "type": "loading", "mode": "dots", "text": "请稍候" }

this.showLoading('加载中');
System.sleep(1600);
this.hideLoading();

右侧预览是四种样式。点「整页遮罩」看盖住整页的加载。

Skeleton 骨架屏

数据还没到时的占位，骨架条会呼吸闪动。配合 showIf 与真实内容互斥。

参数名	类型	说明
rows	Number	灰色条数量，默认 3
avatar	Boolean	是否显示圆形头像占位
showIf	String	为真时显示骨架

{ "type": "skeleton", "avatar": true, "rows": 3, "showIf": "loading" }

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
strokeWidth / style.height	Number	条高度 dp，默认 6
style.color	String	进度色，默认主题绿
trackColor	String	底条颜色，默认 #E3EBEA

{ "type": "progressBar", "name": "upload", "label": "上传进度", "value": 70, "unit": "%" }

{ "type": "progressBar", "name": "cpu", "label": "占用", "value": 36, "unit": "%", "strokeWidth": 3, "style": { "color": "#C2410C" } }

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

{ "type": "progressCircle", "name": "done", "value": 70, "unit": "%", "size": 88 }

Collapse 折叠面板

可展开 / 收起的一组条目。accordion: true 时同时只开一项。展开内容可以是纯文字，也可以是 children 组件。

参数名	类型	说明
name	String	对应 data 中的键。手风琴为字符串，否则为打开项的数组
accordion	Boolean	手风琴，默认 false
items / options	Array	{ title, name, text, children, disabled }
value	String / Array	默认打开的项
onChange	String	展开变化时调用
style.color	String	折叠箭头颜色。不写则跟 window.theme.primary

{
  "type": "collapse",
  "name": "open",
  "accordion": true,
  "items": [
    { "name": "a", "title": "什么是动态页面？", "text": "用 JSON 描述界面。" }
  ]
}

{ "type": "collapse", "name": "tone", "accordion": true, "style": { "color": "#1565C0" }, "items": [{ "name": "a", "title": "蓝色箭头", "text": "折叠箭头颜色写 style.color。" }] }

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	圆角

{ "type": "webview", "src": "https://doc.deeke.cn", "style": { "height": 360, "radius": 8 } }

{ "type": "webview", "src": "html/help.html", "style": { "height": 280 } }

{ "type": "webview", "html": "<h3>说明</h3><p>{{intro}}</p>", "javascript": false, "style": { "height": 200 } }