本章目标：

1 了解常用容器组件Tabs

2 对鸿蒙应用开发中的容器组件有更进一步的深入了解

前面章节关于组件及容器组件的介绍：

「华为鸿蒙应用开发 6」JavaScript UI组件概述及常用组件List

「华为鸿蒙应用开发 7」JavaScript UI组件的属性、事件和方法（这章节有讲到Dialog）

[华为鸿蒙应用开发 8]（稳了，鸿蒙3.0要来）JS UI常用容器组件Form

「华为鸿蒙应用开发 9」JavaScript UI常用容器组件Stepper

前面的章节我们已经介绍了常用容器组件List（列表）、Dialog（弹窗）、Form（表单）、Stepper（分步），现在我们就来继续介绍下另外一个常用的容器组件Tabs（页签）。

Tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。

Tabs的属性

除支持通用属性外，还支持如下属性：

Tabs的事件

除支持通用事件外，还支持如下事件：

1 创建Tabs

我们可以创建一个新项目，或者使用之前创建的项目。这里我们就以之前创建的项目Components为例。首先我们在DevEco Studio中打开该项目，在项目窗口中右键单击pages目录，新建一个JS Page，取名tabspage

在pages > tabspage > tabspage.hml文件中，写入如下代码

    
        
            第一页
            第二页
        
        
            
                第一页的内容
            
            
                第二页的内容
            
        
    

在pages > tabspage > tabspage.css文件中，写入如下代码

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

打开Previewer（预览器）运行程序

2 设置Tabs方向

Tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。

修改pages > tabspage > tabspage.hml文件中，写入如下代码

    
        
            第一页
            第二页
        
        
            
                第一页的内容
            
            
                第二页的内容
            
        
    

注意：索引 index是从0开始计数的。

在Previewer中运行程序

3 设置tab-bar和tab-content

tab-bar除支持通用属性外，还支持如下属性：

tabcontent除支持通用属性外，还支持如下属性：

修改pages > tabspage > tabspage.hml文件中，写入如下代码

    
        
            第一页
            第二页
        
        
            
                第一页的内容
            
            
                第二页的内容
            
        
    

在Previewer中运行程序，可以看到，tab-bar的子组件均分，tab-content不可以进行左右滑动切换内容。

4 添加事件

可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。

修改pages > tabspage > tabspage.hml文件中，写入如下代码

    
        
            第一页
            第二页
        
        
            
                第一页的内容
            
            
                第二页的内容
            
        
    

修改pages > tabspage > tabspage.js文件中，写入如下代码

import prompt from '@system.prompt';

export default {
    change(e) {
        prompt.showToast({
            message: '现在的索引：' + e.index
        })
    }
}

在Previewer中运行程序

至此，Tabs的基本用法就介绍到这里， 一定要自己动手多写代码，多体会。