手册版本 V5.0

组件介绍

在项目开发过程中，为了能够兼容多种平台、多种设备我们需要花费大量力气去完成项目内每个页面的兼容性设置。
GraceUI 发布了 gui-page 组件，来更高效的完成这项工作，您可以使用此组件完成各种模式的页面布局，同时页面组件还提供了挂件、全屏 Loading。
当页面需要自定义头部导航或底部导航时我们推荐您使用 gui-page 组件作为页面根节点；

教程推荐

我们精心为您准备了关于gui-page组件的视频教程，请在 付费用户群 > 群文件内下载并观看，gui-page 组件非常常用，推荐您深度学习理解一下（:

组件名称

gui-page : /graceUI/组件目录/gui-page

兼容平台

组件属性

组件插槽

01. gHeader - 页面头部插槽，包含手机状态栏;
02. gBody - 页面主体插槽，用于承载页面内容布局；
03. gFooter - 页面底部插槽，用于承载自定义底部导航；
04. gPendant - 页面右下角挂件插槽，用于实现返回顶部、客服、多功能菜单等功能；
05. gFixedTop - 吸顶原生插槽, 紧贴顶部导航的 fixed 定位；

皮肤样式

您可以通过修改对应皮肤的样式来修改页面组件的相关样式，具体如下 :

/* *** gui-page 页面组件相关  */
/* 页面内置全屏 Loading 背景颜色 */
.gui-page-loading-bg{background-color:rgba(255,255,255,0.88);}
/* 页面内置全屏 Loading 颜色 */
.gui-page-loading-color{background-color:#2B2E3D;}

/* 自定义导航左侧按钮背景颜色 */
.gui-header-buttons-bg{background-color:rgba(0,0,0,0.8);}
.gui-header-buttons-color{color:#FFFFFF;}

/* 底部自定义导航切换色 */
.gui-nav-bottom-color{color:#B6C3D2;}
.gui-nav-bottom-active-color{color:#2B2E3D;}
/* gui-page 页面组件相关 *** */

组件方法

getDomSize : 
功能 : 获取插槽的尺寸
参数 :
01 选择器 : guiPageHeader - 自定义头部导航、guiPageBody - 页面主体、guiPageFooter - 页面自定义底部
02 自定义回调函数，携带参数 : 选中dom的尺寸信息
示例 : 

graceJS.getRefs('guiPage', this, 0, (ref)=>{
	ref.getDomSize('guiPageBody', (e)=>{
		console.log(e);
		// 02. 导航的高度
		// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
		// 轮播主体高度 = 页面高度 - 导航高度
		this.mainHeight  = e.height - uni.upx2px(100);
		this.pageLoading = false;
	});
});
// 完整代码 : https://www.graceui.com/v5/info/10040-55.html

setScrollTop : 
功能 : 设置内置滚动区域的 scroll-top 值 [ 2021.07.29 新增 ];

演示代码