介绍
应用中支持设计全局布局模板供页面使用。
建议将各页面通用样式抽取成布局模板,然后将布局应用于页面。布局与页面绑定支持多对多。
![](https://qcloudimg.tencent-cloud.cn/image/document/0221d5f6e3c7161f05a50c0da5e7cf75.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f2af88476fef5812dc03e5b2b6dba7a0.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0221d5f6e3c7161f05a50c0da5e7cf75.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f2af88476fef5812dc03e5b2b6dba7a0.png)
使用步骤
设计应用布局模板
进入布局设计
应用编辑器左上角进入布局设计,该模式下可设计通用布局模板供页面使用。
![](https://qcloudimg.tencent-cloud.cn/image/document/fe11888a919efd3d73c40c5a6ee432d2.png)
搭建布局模板
我的布局中默认提供五套布局模板,分别为:顶部导航布局、左侧导航布局、厂字导航布局、Tab栏导航布局和导航栏布局。用户可基于已有布局设计,或新建自定义布局。
注意:
布局搭建属于全局维度,布局设计下建议使用全局变量和方法,如使用页面级变量方法可能导致不可用。
应用布局模式下暂不支持在组件样式编辑器中使用样式 API。可以在代码编辑器全局样式中调整布局样式。
每套布局模板中请确保有且仅有一个页面插槽组件,即页面占位区域,用来承载页面内容。当页面应用布局后,页面内容会插入页面插槽中。
![](https://qcloudimg.tencent-cloud.cn/image/document/0661fc0d1a74782a5e33f5db925de468.png)
页面应用布局模板
布局模板支持可视化应用到页面,两种应用方式分别如下:
页面属性-页面布局
选中左侧大纲树的页面根节点,即可在右侧属性面板中看到页面布局配置入口,如下所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/e7abc0ca543fbf83cd4a19edd058cbd9.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/e7abc0ca543fbf83cd4a19edd058cbd9.png)
新建页面-页面布局
单击应用编辑器左上角新建页面,即可在新建页面弹窗中看到页面布局配置入口,如下所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/7009ae7246d79e6512795660ebab45b7.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7009ae7246d79e6512795660ebab45b7.png)
说明:
页面引用布局后,布局模板相关请前往布局设计中调整。
导航布局菜单支持根据页面一键生成。
![](https://qcloudimg.tencent-cloud.cn/image/document/f7e7bc3084b71857dc70a371d4f020a9.png)
顶部布局导航的应用实践
1. 新建三个页面分别是空白页1、空白页2、空白页3。
![](https://qcloudimg.tencent-cloud.cn/image/document/b8f0ce967861d5f4ebd22c3c2ab63eca.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/b8f0ce967861d5f4ebd22c3c2ab63eca.png)
2. 在空白页1中设置页面布局导航为顶部导航布局。
![](https://qcloudimg.tencent-cloud.cn/image/document/c81e2cc5442553f4dfc1d3e2924854ac.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c81e2cc5442553f4dfc1d3e2924854ac.png)
3. 切换到布局设计模式。
![](https://qcloudimg.tencent-cloud.cn/image/document/1ac18575f6b17253e604f0dcf2ac1600.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/1ac18575f6b17253e604f0dcf2ac1600.png)
4. 设置菜单栏页面跳转。
![](https://qcloudimg.tencent-cloud.cn/image/document/22441051c167c6269a7c5bb43c0934f4.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/22441051c167c6269a7c5bb43c0934f4.png)
5. 空白页2、空白页3重复空白页1的操作,使菜单二对应空白页2,菜单三对应空白页3。
![](https://qcloudimg.tencent-cloud.cn/image/document/423440f8c3e6073b3a8170389851443f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c52c963ca21b78d641b02f783367922e.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/423440f8c3e6073b3a8170389851443f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c52c963ca21b78d641b02f783367922e.png)
6. 顶部布局导航效果预览。
6.1 单击菜单一。
![](https://qcloudimg.tencent-cloud.cn/image/document/27709b68b9478dd0721d0e979d474d0f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/27709b68b9478dd0721d0e979d474d0f.png)
6.2 单击菜单二。
![](https://qcloudimg.tencent-cloud.cn/image/document/6b640d40f08649a1ae9b8951d9c99c9e.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6b640d40f08649a1ae9b8951d9c99c9e.png)
6.3 单击菜单三。
![](https://qcloudimg.tencent-cloud.cn/image/document/aabe8e8d5068b0f23565045054ee8a44.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/aabe8e8d5068b0f23565045054ee8a44.png)