手册版本 V3.0

重要说明

本示例全屏选项卡是基于自定义导航模式，页面使用 page 组件，切换使用切换导航组件 ( 放在自定义导航内 ) + 轮播组件实现了这样的布局。
如果您使用原生导航，请参考 http://grace.hcoder.net/manual/info/837-30.html

实现原理

1 将可切换导航放置在 gracePage 组件的 gHeader 插槽内;
2 利用 gBody 插槽自动撑满页面;
3 计算 gBody 插槽高度赋值给轮播组件和竖向滚动区域作为高度 ( 加一些延迟是为了保证设备渲染完成 );

体验优化

为了保证设备渲染完成运算加一些延迟，客户可能会感觉页面的变化，您可以开启 gracePage 的全屏加载并将背景设置为 rgba(255,255,255,1) ，当api请求完成或者故意延迟一秒再关闭全屏加载动画就可以优化运行体验 (:

开启自定义导航

// uni.app 设置
{
	"path": "pages/demo/index",
	"style": {
		"navigationBarTitleText": "GraceUI",
		"titleNView" : false,
		"navigationStyle" : "custom"
	}
}
// 小程序设置
{
  "usingComponents": {
    "gracePage"  : "../../graceUI/components/gracePage",
    "graceNavBar": "../../graceUI/components/graceNavBar"
  }
}

温馨提示

如果您的选项卡内元素布局各不相同，一般是项目的入口页面并且切换分类是固定的，您依然可以使用此原理实现全屏选项卡~
步骤 :
01 固定切换导航的数据项;
02 swiper-item 由循环模式改成手动编写模式（对应切换数据实现对应数量的 swiper-item）;
03 在每个 swiper-item 内的 scroll-view 内完成每个选项的自定义布局工作;

完整代码