检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在AstroZero高级页面中使用轮播组件实现图片展示和URL跳转 期望实现效果 高级页面中的轮播组件主要用于多个图片的自动循环切换。您也可以为图片添加超链接，即单击图片，跳转到指定的网站。 图1 最终实现效果 功能实现方法 创建一个低代码应用。
图7 拖拽组件到画布中 单击页面上方的，保存高级页面后，单击，发布高级页面。 单击，进入预览页面，查看效果是否符合预期。 父主题： 高级页面专项
该布局模式常用于IOC大屏页面开发场景。 流式布局：在流式布局下，拖拽到页面中的组件将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。该布局常用于常规Web应用开发，例如电商网站、管理网站等等。 搭建高级页面。
流式布局 流式布局为自适应布局，用于常规Web应用开发，例如电商网站、管理网站等。流式布局为12列栅格布局，可拖动组件右侧边界，按栅格进行组件宽度调整。组件高度将根据组件内容进行自适应，页面中组件将按照从左到右、从上到下的顺序依次排列。
流式布局常用于常规Web应用开发，例如电商网站、管理网站等。 开发高级页面。 下面以开发一个绝对布局的高级页面为例，向您如何使用AstroZero快速开发一个高级页面。 图2 绝对布局类型高级页面组件布局示例 如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。
设置AstroZero标准页面面包屑组件属性 面包屑组件用于显示网站的层级结构，告知用户当前所在位置。 图1 面包屑组件 数据绑定 将面包屑组件的某个属性，如隐藏、样式、跳转等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。
流式布局：在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。流式布局常用于常规Web应用开发，例如电商网站、管理网站等。 绝对布局高级页面 创建绝对布局类型的高级页面。
参考消费者业务网站（如图1所示），页面中主要包含标签栏和详情展示模块两部分，可以通过切换标签来控制详情展示模块中的展示内容。 图1 消费者业务网站示例 本章节主要在高级页面中，通过两个组件（标签页组件、信息展示组件）复现上述场景。
* name 需要唯一; * displayName 用于在开发界面配置路由时展示 * params 定义路由的参数, 只有最顶层路由可以配置参数 * children 配置嵌套路由, 目前最多支持到三级路由 */
页面级常见操作 使用说明 低代码平台预置了多种常用的事件交互动作，例如打开页面、弹出页面以及关闭弹出页面。在设计页面时，可以直接使用预置动作，完成页面相关的常见操作。 打开页面 以单击“立即体验”按钮，打开新的产品体验入口页面为例，进行介绍。 在标准页面设计界面，选中按钮组件。
标准页面提供了丰富的组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。 高级页面 对于一些样式比较复杂的页面，例如网站、电商、园区大屏等，您可以使用平台提供的“高级页面”。
链接：链接地址，用于链接、跳转，一般常用来打开新页面或作为文字性按钮使用。 图片：用于上传图片，可以从OBS或者SFTP选择或上传图片。 面包屑：显示网站的层级结构，告知用户当前所在的位置，如“首页/菜单1/菜单2/菜单3”。
场景描述 本章节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。标签切换效果如图1所示，页面中主要包含标签栏和详情展示模块两部分，可以通过切换标签来控制详情展示模块中的展示内容。
面包屑 面包屑组件用于显示网站的层级结构，告知用户当前所在位置以及在需要向上级导航时显示。 在标准页面设计界面，从“基本组件 > 基本”中，拖拽“面包屑”组件至页面工作区域，如图1。 图1 面包屑 查看组件帮助 将鼠标放在对应的组件上，单击，可查看组件说明。
在页面底部单击测试窗口右上角的，返回消息头信息。
页面 新创建的页面，默认是一个空白的页面框架，可以通过设置页面属性，优化页面效果，支持设置页面水印。 在标准页面设计界面，选择“组件导航 > 页面”后，即可选中“页面”页签。在右侧的属性页签中，可设置整个页面的属性。
高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面，您也可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。
name 需要唯一; displayName 用于在开发界面配置路由时展示 params 定义路由的参数, 只有最顶层路由可以配置参数 children 配置嵌套路由, 目前最多支持到三级路由 */ const
单击页面上方的，保存页面。
参考开发高级组件中操作，将高级页面组件包上传至组件库中，在页面上中添加该高级页面组件。 当高级页面中拖入widget_demo_mintui高级页面组件后，即可在“页面设置 > 资源”中发现Vue库和MintUI库已加载，表示引用成功。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
