手册版本 V5.0

布局介绍

全屏选项卡经常被应用在项目的入口页面，一般使用切换导航+轮播组件实现，GraceUI 为您提供了基础布局，请掌握布局原理，然后灵活运用。

实现步骤

1 使用 gui-page 页面组件，将切换导航和轮播组件放置在 gBody 插槽内;
2 页面主体自动撑满页面;
<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage">
    <view slot="gBody" class="gui-flex1 gui-flex gui-columns">
3 计算出核心区域高度
graceJS.getRefs('guiPage', this, 0, (ref)=>{
	ref.getDomSize('guiPageBody', (e)=>{
		// 02. 导航的高度
		// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
		// 轮播主体高度 = 页面高度 - 导航高度
		this.mainHeight   = e.height - uni.upx2px(100);
		this.pageLoading  = false;
	});
});
4 核心部分使用滚动区域布局，实现上下滚动;

兼容平台

完整代码