---
title: 多页面、画面与弹窗
source: https://vjmap.com/guide/visual/pages-windows.html
---

---
group: 搭建页面
description: 用子页面、前景层和背景层组织多页大屏，用画面做弹窗、抽屉和启动画面，并把画面嵌进页面复用。
---

# 多页面、画面与弹窗

一块大屏往往不止一页：总览页、工艺页、分析页来回切换，点一下设备弹出详情，侧边滑出告警列表。本篇讲怎么组织这些内容：

- **页面**：主画布，运行时一次显示一个，用按钮或菜单切换。
- **前景层、背景层**：所有页面共用的一层，前景盖在每页上面（如统一的标题栏），背景垫在每页下面（如统一的底图、边框）。
- **画面**：独立于页面的一块画布，可以弹窗打开、从侧边滑出成抽屉、在应用一打开时作为启动画面，也可以作为组件嵌进页面重复使用。

## 页面条

编辑器底部是页面条，页面、前景、背景和画面都在这里新建和切换。下面两张图来自示例「综合工程 - 智慧供热能源站三维组态联控」，它有三个页面和三个画面。左半段是页面：

![页面条左半段：前景、页面、子页面、背景](./images/pages-windows-bar-pages.webp)

1. **+前景**：新建前景层。建好后变成「前景层」页签，点它编辑前景内容。
2. **页面页签**：每个页面一个页签，当前编辑的高亮；页签上的 × 删除这一页。
3. **+子页面**：新建一个页面。
4. **+背景**：新建背景层，用法同前景。

右半段是画面：

![页面条右半段：画面页签与 +画面](./images/pages-windows-bar-windows.webp)

5. **画面页签**：每个画面一个页签，点它进入画面编辑。
6. **画面页签上的按钮**：向上箭头「发布为组件」（填名称、截封面，存进资产库，可以在别的工程里拖出来用）；星形「设为启动画面」（应用一加载就打开）；× 删除画面。
7. **「页」标记**：这个画面已被某个页面设为「随画面打开」，鼠标移上去能看到是哪个页面。已经被页面关联的画面不能再设为启动画面。
8. **+画面**：新建画面。

页面条最右边是画布缩放：缩小、放大、比例输入框和「最佳显示比例」。

左上角图层面板的「页面」页签列出工程里所有的页面和画面，页面多的时候在这里找更方便：

![图层面板的「页面」页签](./images/pages-windows-list.webp)

1. **页面页签**：图层面板顶部「页面图层」旁边的「页面」。
2. **页面列表**：前景层、各个页面、背景层，打勾的是当前正在编辑的；上方搜索框支持拼音。
3. **画面列表**：工程里所有的画面。

## 多个页面

### 新建子页面

点页面条上的「+子页面」，选新页面的类型：

![「+子页面」弹出的类型选择](./images/pages-windows-add-subpage.webp)

1. **页面类型**：「空白页」是普通页面；「组态页」是整页组态画布，进去就能用图元库拼工艺流程，见[组态](./scada.html)。
2. **+子页面**：点它弹出上面的选择。

新页面默认叫「子页面1」，在页签上双击或在属性面板里改名。每个页面有自己的布局画像、适配方式和背景，见[画布适配与布局](./layout.html)。

### 在页面之间搬组件

已经做好的组件要挪到另一页，不用重做：右键组件，选「移动到页面」或「复制到页面」，再选目标页面。

![右键菜单里的「移动到页面」「复制到页面」](./images/pages-windows-move.webp)

1. **移动到页面**：组件从当前页移走，放到目标页同样的位置。
2. **复制到页面**：当前页保留，目标页多一份。
3. **目标页面**：子菜单列出工程里的其他页面，图中只有「子页面1」。

### 切换页面

运行时切页靠事件：给按钮、菜单或图表配一个「点击」事件，动作选「切换页面」，再选目标页面。供热示例顶部的「综合总览」「工艺组态」「数据分析」三个按钮就是这样做的；它的「换热站当前负荷」柱状图点一下柱条，也会跳到分析页。事件的配法见[事件交互与多状态](./events.html)。

## 画面

### 新建与编辑画面

点「+画面」新建一个画面，默认叫「画面1」，尺寸 600×400，显示在页面中央。画面的编辑方式和页面一样：从组件库添加组件、调样式、接数据、配事件。选中画面本身（点画布空白处），属性面板里是画面的设置：

![画面的「画面设置」和「标题栏」](./images/pages-windows-settings.webp)

1. **画面模式**：「固定」显示在页面的固定位置；「锚定」贴着触发它的组件旁边弹出，适合做悬浮卡片、地图信息窗。
2. **画面位置**：中央、顶部、底部、左侧、右侧。选左侧或右侧就是从侧边滑出的抽屉，选顶部或底部就是上下的通栏。
3. **画面大小与位置偏移**：宽、高，单位可选像素或百分比；位置偏移在默认位置上再挪一点。靠边的画面还能设上下左右的边距。
4. **遮罩与关闭**：「阻止页面交互」打开时画面是模态的，画面外的页面点不动，并用「遮罩颜色」压暗；「点击外部关闭」点遮罩就关；「内容可滚动」让内容超出时能滚动。
5. **标题栏**：显示标题栏、标题文字、高度、背景、文字颜色和大小；「可拖动画面」打开后，播放时按住标题栏能拖动画面。

下面还有「关闭按钮」（显示与否、颜色、大小、偏移）、「背景设置」和「框阴影」三组。

### 用按钮打开画面

1. 回到页面，加一个按钮，在「样式」里把文字改成「查看设备详情」。
2. 切到「事件」页签，点「添加事件」。
3. 触发选「点击」；动作选「打开画面」，目标画面选「画面1」，操作选「打开」。
4. 点「确认」。

![给按钮添加「打开画面」事件](./images/pages-windows-open-action.webp)

1. **触发**：什么时候执行，这里是「点击」。
2. **动作**：「打开画面」在「导航跳转」分组里，同组还有「切换页面」「打开链接」。
3. **目标画面**：要打开哪个画面。
4. **操作**：「打开」「关闭」或「切换」（开着就关、关着就开）。画面里的「关闭」按钮配同样的动作、操作选「关闭」即可。

点顶部「预览」，再点按钮，画面以模态窗口弹出：

![预览时点按钮，画面以模态窗口打开](./images/pages-windows-modal.webp)

1. **模态窗口**：带「设备详情」标题栏，页面其余部分被遮罩压暗、点不动。
2. **关闭按钮**：标题栏右侧的 ×；打开了「点击外部关闭」时，点遮罩也能关。
3. **嵌在页面里的同一个画面**：右上角是用画面组件嵌进页面的「画面1」，内容和弹窗完全一样，见下文。

### 抽屉

抽屉就是靠边的画面。供热示例的「告警中心」画面位置选「右侧」，大小 500×1080，点首页的「打开告警中心 · 查看全部记录」，它从右边滑出：

![告警中心以右侧抽屉打开](./images/pages-windows-drawer.webp)

1. **右侧抽屉**：标题、告警表格和底部的「关闭抽屉」按钮都是画面里的组件。

### 进入页面时自动打开

不想让用户点按钮，进入某个页面时就把说明弹出来：选中这个页面，在「基础设置」里把「随画面打开」设成要打开的画面。

![页面「综合总览」随画面打开「操作指南」](./images/pages-windows-open-with-page.webp)

1. **随画面打开**：进入这个页面时自动打开选中的画面，图中是「操作指南」。

供热示例一进入「综合总览」，顶部就滑出「操作指南」说明条。页面条上被关联的画面页签会显示「页」标记。

要在整个应用一打开时就显示（比如欢迎页、登录提示），点画面页签上的星形，设为启动画面。一个工程只能有一个启动画面。

### 把画面嵌进页面

同一块内容要在好几个页面上出现，比如公共的头部、一组 KPI 卡，可以做成画面，再用「画面组件」嵌进各个页面。画面组件在组件库「控件」分类里：

![画面组件的设置](./images/pages-windows-instance.webp)

1. **画面组件**：在页面上显示「画面1」的内容，可以像普通组件一样移动、缩放。
2. **选择画面**：要显示哪个画面。
3. **内容缩放**：画面按自己的尺寸画好后怎么放进组件框：拉伸铺满、等比适应、等比铺满或不缩放。
4. **显示画面背景**：是否带上画面自己的背景。

画面组件是引用：改了画面里的内容，所有嵌了它的地方都跟着变。要跨工程复用，就点画面页签上的「发布为组件」存进资产库，资产库里的是发布那一刻的快照。

::: tip 怎么选
- 不离开当前页、临时看更多内容 → 用按钮打开画面（弹窗或抽屉）。
- 几个页面共用一块内容、改一处处处生效 → 画面组件。
- 换个工程也要用 → 发布为组件，到资产库里拖。
- 只是鼠标移上去看一句说明 → 组件的「悬浮弹层」，见[组件库与样式](./components.html)。
:::

## 下一步

- [事件交互与多状态](./events.html)：切换页面、打开画面之外的更多动作。
- [画布适配与布局](./layout.html)：每个页面的布局画像和适配方式。
- [保存、发布与嵌入](./publish.html)：发布后在浏览器里打开或嵌入业务系统。