手册版本 V3.0

在项目开发过程中，为了能够兼容多种平台、多种设备我们需要花费大量力气去完成项目内每个页面的兼容性设置。在之前 graceUI 发布了 graceHeader、graceIphonexBottom、system.js 等组件及模块来组合解决这些兼容性问题。graceUI 发布了 gracePage 组件，来更高效的完成这项工作；

视频教程

我们精心为您准备了关于page组件的视频教程，请在 付费用户群 > 群文件内下载并观看 （:

组件名称

gracePage : /graceUI/组件目录/gracePage

组件介绍

gracePage 组件是页面级的，它将页面划分为头部、主体、底部三个可灵活配置的部分，可以实现自动多平台、多设备的兼容布局。是一个非常推荐大家使用的组件；

更新说明

2020-11-16 更新:
添加 gFixedTop 吸顶容器插槽
2020-05-09 更新 :
01. 恢复使用 headerHeight 属性（不影响旧项目 ）, 自定义头部导航最小高度44px, 实际高度可由开发者自定义;
02. 新增 getHeaderHeight() 可以获取自定义头部导航高度;
03. 请尽量保持自定义导航高度为 44px，如果超出 44px 请参考我们提供的例子完成 headerHeight 的赋值工作 ( 点击这里查看例子 )。
04. 添加 bounding 属性，来控制是否自动躲避微信小程序胶囊按钮。

组件属性

组件插槽

<slot name="gHeader"></slot> 头部导航内容
<slot name="gBody"></slot> 页面主体内容
<slot name="gFooter"></slot> 页面底部导航内容
<slot name="gRTArea"></slot> 页面悬浮挂件内容
<slot  name="gFixedTop"></slot> 吸顶容器插槽

uni-app 开发时 APP 端必须的设置（manifast.json）

/* 5+App特有相关 */
"app-plus": {
    "nvueCompiler":"uni-app",
    "safearea": {
        "background": "#FFFFFF",  
        "bottom": {  
            "offset": "auto"  
        }  
    },
}

说明

可以通过插槽、组件属性的灵活使用适配各种设备及场景；

组件方法

getHeaderHeight() : 获取自定义导航高度,使用时请延迟一秒（组件底层延迟800毫秒保证元素渲染完成）。

演示代码