手册版本 V6.0

页面组件介绍

在项目开发过程中，为了能够兼容多种平台、多种设备我们需要花费大量力气去完成项目内每个页面的兼容性设置。GraceUI 发布了 gui-page 组件，来更高效地完成这项工作，您可以使用此组件完成各种模式的页面布局。同时页面组件还提供了右下角挂件、全屏 Loading、内置刷新、内置加载更多等常用的功能。
我们推荐您使用 gui-page 组件作为页面根节点。

教程推荐

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

组件名称

gui-page : GraceUI组件目录/gui-page.vue

兼容平台

组件属性

组件插槽

1 gStatusBar - 系统状态栏插槽
2 gHeader - 自定义头部导航插槽
3 gBody - 页面主体插槽，用于承载页面内容布局
4 gFooter - 页面底部插槽，用于承载自定义底部导航
5 gPendant - 页面右下角挂件插槽，用于实现返回顶部、客服、多功能菜单等功能
6 gFixedTop - 吸顶原生插槽, 紧贴顶部导航的 fixed 定位

组件事件

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

1 scroll
当内置全屏滚动区域滚动时触发，携带参数 页面滚动位置数值；

2 reload
当页面满足下拉刷新条件时触发；

3 loadmorefun
当页面满足上拉加载更多条件时触发；

4 gotoTop
页面头部导航被双击后触发，用于双击返回顶部；

组件方法

getDomSize : 

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

示例 : 

export default{
	onReady : function(){
		var guiPage = this.$refs.guiPage;
		guiPage.getDomSize("guiPageBody", function(res){
			console.log(res)
		});
	},
}

getRefs

功能 : 利用 ref 属性获取元素
参数 : 
1 ref 值
2 计数器起始值，默认请填写 0
3 获取元素成功后执行的回调函数，携带参数 ref 对象

演示说明

请点击手册左侧列表（页面布局部分），查看和学习我们提供的多种模式的页面布局演示。也推荐您在 "GraceUI 付费群" 内下载页面组件相关的视频教程进行学习，页面组件是一个基础且常用的组件，希望大家可以深度理解，灵活运用。