在项目开发过程中，为了能够兼容多种平台、多种设备我们需要花费大量力气去完成项目内每个页面的兼容性设置。
GraceUI 发布了 gui-page 组件，来更高效的完成这项工作，您可以使用此组件完成各种模式的页面布局，同时页面组件还提供了挂件、全屏 Loading。
当页面需要自定义头部导航或底部导航时我们推荐您使用 gui-page 组件作为页面根节点；
我们精心为您准备了关于gui-page组件的视频教程，请在 付费用户群 > 群文件内下载并观看，gui-page 组件非常常用，推荐您深度学习理解一下（:
gui-page : /graceUI/组件目录/gui-page
| H5 | APP | 小程序 | NVUE |
| ✔ | ✔ | ✔ | ✔ |
| 属性名称 | 类型 | 默认值 | 作用 |
| fullPage | Boolean | false | 主体部分是否铺满屏幕 |
| customHeader | Boolean | false | 是否使用自定义头部导航 |
| headerSets | Object | {height:44, zIndex:100} // 高度, z-index 值 | 自定义头部导航设置 [ 自定义模式有效 ] |
| headerStyle | String | background-color:#FFFFFF; | 自定义头部导航样式 [ 自定义模式有效 ] |
| isHeaderSized | Boolean | true | 是否启用自定义头部占位 |
| statusBarStyle | String | background-color:#FFFFFF; | 状态栏样式 [ 自定义模式有效 ] |
| customFooter | Boolean | false | 是否使用自定义底部导航 |
| footerSets | Object | {height:100, zIndex:100, bg:'linear-gradient(to bottom, #FFFFFF,#FFFFFF)'} | 自定义底部导航设置 [ 自定义模式有效 ] |
| iphoneXButtomStyle | String | '' | iphoneX 底部占位元素样式设置 |
| pendantSets | Object | {width:'100rpx', right:'25rpx', bottom:'100rpx', zIndex:100} | 页面右下角挂件设置 |
| isLoading | Boolean | false | 是否展示全屏加载 |
| isSwitchPage | Boolean | false | 页面是否为一个switchTab 页，影响如下 : 01. 不需要进行 iPhone 底部适配 02. 自定义底部导航 H5 端 bottom 值调整为 50px |
| refresh | Boolean | false | 是否启用页面内置的下拉刷新 |
| refreshText | Array | ['继续下拉刷新','松开手指开始刷新','数据刷新中','数据已刷新'] | 下拉刷新过程组件文本 |
| refreshBgColor | Array | ['#FFFFFF','#FFFFFF','#FFFFFF','#63D2BC'] | 下拉刷新过程背景颜色 |
| refreshColor | Array | ['rgba(69, 90, 100, 0.6)','rgba(69, 90, 100, 0.6)','#63D2BC','#FFFFFF'] | 下拉刷新过程文本颜色 |
| refreshFontSize | String | 26rpx | 下拉刷新组件文本尺寸 |
| loadmore | Boolean | false | 是否启用页面内置的加载更多 |
| loadMoreText | Array | ['','数据加载中', '已加载全部数据', '暂无数据'] | 加载更多过程组件文本 |
| loadMoreColor | Array | ['rgba(69, 90, 100, 0.6)', 'rgba(69, 90, 100, 0.6)', 'rgba(69, 90, 100, 0.8)','rgba(69, 90, 100, 0.8)'] | 加载更多过程文本颜色 |
| loadMoreStatus | Number | 0 2022.05.12 新增 | 加载更多默认状态 |
| loadMoreFontSize | String | 26rpx | 加载更多组件文本尺寸 |
| apiLoadingStatus | Boolean | false | 页面内 api 加载状态 true : api 数据加载中，false ：无加载执行 作用 : 避免刷新、加载同时执行引发冲突 |
| headerSizedStyle | String | '' 2021.08.23 新增属性 | 开启自定义头部导航时，占位 view 样式 |
| fixedTopZIndex | number | 2 2021.08.23 新增属性 | 吸顶插槽 z-inddex 值 |
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.htmlsetScrollTop :
功能 : 设置内置滚动区域的 scroll-top 值 [ 2021.07.29 新增 ];