账户中心 退出系统
使用手册 模板中心 账户中心
快速开始
常见问题
更新日志
下载框架
快速部署
组件调用手动调用
自动加载easycom
NVUE 说明
版权要求
设计规范初版
基础布局 ( 6 )
页面布局从这开始哦 (:
Flex布局组件形式
Flex布局样式形式
竖向切换动态切换
元素定位
手势识别
基础样式 ( 8 )
文本颜色
背景样式
阴影效果
圆角边框
文本样式
内置图标
图标扩展
样式动画
常用布局 ( 25 )
宫格布局九宫格
头部导航
底部导航
切换导航单行模式
切换导航多行模式
吸顶容器
动态吸顶
名片卡片
滚动区域
局部选项卡
全屏选项卡模式一原理演示
全屏选项卡模式二原理演示
全屏选项卡实战演示
分段切换
折叠面板
普通表格
数据表格
分类展示
横向公告
返回顶部
弹出菜单
功能菜单
时间轴
侧边抽屉
图标分类
常用列表 ( 9 )
通用列表
滑动列表新版组件模式
新闻列表
评论列表
图文列表
树状列表
拖拽排序竖向
可选列表单选 | 多选
全选列表多选 | 全选
常用组件 ( 25 )
徽章组件
圆角组件
标签组件
滚动公告
无缝滚动
按钮组件
进度按钮
搜索组件
星级评价
通用标题更多、换一批
倒计时
轮播组件新版本 更好用
轮播组件原生模式
区间滑块
进度圆环
城市选择
地区联动新版本 更灵活
步骤提示
链接组件
优惠券组件
为空展示
图片选择
多图上传
头像群组
数值动画
刷新与加载 ( 5 )
加载组件
全屏加载
下拉刷新原生模式
刷新组件滚动区域模拟模式
上拉加载原生模式
提醒弹框 ( 7 )
遮罩弹出层
顶部消息框
模态对话框
底部对话框
底部消息框
底部操作表
右下消息框
表单相关 ( 12 )
表单元素
表单验证
动态表单
分步提交
数值框
数字键盘
可选标签 单选 多选
可选标签 携带数据
可删标签
点选按钮
下拉选择
滑动解锁
日期时间 ( 6 )
日期及时间带有农历
日期区间日历形式
日期及时间pickr模式
时间段选择pickr模式
日程日历日历+日程
横向日期
文章相关 ( 4 )
文本编辑器
编辑器解析
富文本加强
展开全文
JS 函数库 ( 6 )
工具介绍
时间转换
网络请求
随机数值
md5 转换
使用 promise
系统信息
地图使用 ( 3 )
位置标注位置转换
周边信息周边搜索
拖拽定位中心坐标
常用界面 ( 21 )
搜索界面
登录注册
个人中心
头像裁剪
购物车
订单中心
条件筛选
商品详情
图片懒加载
骨架加载
抽奖活动
瀑布流
地址列表
添加地址
证件上传
滚动推荐
短信验证
排行榜
数据图表
商城套装
即时通讯
页面布局组件
在项目开发过程中,为了能够兼容多种平台、多种设备我们需要花费大量力气去完成项目内每个页面的兼容性设置。在之前 graceUI 发布了 graceHeader、graceIphonexBottom、system.js 等组件及模块来组合解决这些兼容性问题。graceUI 发布了 gracePage 组件,来更高效的完成这项工作;

视频教程

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

组件名称

gracePage : /graceUI/组件目录/gracePage

组件介绍

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

更新说明

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

组件属性

属性名称类型默认值作用
customHeaderBooleantrue页面是否开启自定义导航
headerHeightNumber44头部导航高度,单位 px ( rpx 转换参考示例 )
headerIndexNumber100
头部导航 z-index 值  ( 使用自定义导航时生效 )
headerBGStringnone
头部导航背景颜色
statusBarBGstringnone状态栏背景颜色
footerIndexNumber100
底部导航 z-index 值
footerBgstring
''底部导航背景颜色
isSwitchPageBooleanfalse页面是否为一个switchTab 页 ( 不需要进行 iPhone 底部适配 )
rbWidthNumber100右下角挂件宽度,单位 rpx
rbBottomNumber100右下角挂件 bottom 值,单位 rpx
rbRightNumber20右下角挂件 right 值,单位 rpx
rbIndexNumber100右下角挂架 z-index 值
borderWidthString0
头部导航底部边框尺寸,如 1px 代表使用边框
borderColorString#D1D1D1头部导航底部边框颜色
loadingBG [20200413新增]Stringrgba(255,255,255, 0.1)页面 loading 组件遮罩层背景
isLoading [20200413新增]Booleanfalse是否展示 loading
loadingPointBg [20200413新增]String#3688FFloading 圆点背景颜色
footerBottom [20200430新增]String0rpxh5 端专有属性,设置底部插槽 bottom 值
boundingBooleantrue是否自动躲避小程序胶囊按钮

组件插槽

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

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

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

说明

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

组件方法

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

演示代码

UNI 普通版本
NVUE 版本
微信小程序独立版本
登录并购买 GraceUI 后可以查阅完整手册内容 。