上一篇教程中我们介绍了如何实现菜单以及菜单间的联动功能,那点了菜单中的一个选项之后页面该如何展示呢?以及,打开了多个页面,页面之间如何切换呢?这篇教程和大家一起学习如何实现这两个,也就是下面这个效果:
一、Tab分页和切换的需求
按照我们前面教程中提到的以需求驱动开发,我们要实现Tab分页就先分析清楚具体的需求:
- 点击左侧菜单时,在Tab栏增加一个tab
- 点击左侧菜单时,调用该菜单对应的页面返回到正文部分
- 点击tab时,将该tab背景色更改为蓝色
- 点击tab时,将其它tab背景色更改为灰色
- 点击tab时,将该tab对应的页面内容展示到正文部分
- 点击tab上的关闭按钮时,Tab栏去除当前tab
- 点击tab上的关闭按钮时,将该tab左侧的tab背景色更改为蓝色
- 点击tab上的关闭按钮时,将该tab左侧的tab对应的页面展示到正文部分
- 为了保证所有tab都关闭时依然有内容展示在正文部分,将"仪表盘"tab固定在Tab栏最左侧,并且该tab没有关闭按钮