本章目标：

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的属性

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

名称

类型

默认值

必填

描述

index

number

0

否

当前处于激活态的tab索引。

vertical

boolean

false

否

是否为纵向的tab，默认为false，可选值为：

false：tabbar和tabcontent上下排列。true：tabbar和tabcontent左右排列。Tabs的事件

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

名称

参数

描述

change

{ index: indexValue }

tab页签切换后触发。

说明

动态修改index值不会触发该回调。

1 创建Tabs

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

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

<div class="container">    <tabs>        <tab-bar>            <text>第一页</text>            <text>第二页</text>        </tab-bar>        <tab-content>            <div class="text">                <text>第一页的内容</text>            </div>            <div class="text">                <text>第二页的内容</text>            </div>        </tab-content>    </tabs></div>

在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文件中，写入如下代码

<div class="container">    <tabs index="1" vertical="true">        <tab-bar>            <text>第一页</text>            <text style="margin-top: 60px;">第二页</text>        </tab-bar>        <tab-content>            <div class="text">                <text>第一页的内容</text>            </div>            <div class="text">                <text>第二页的内容</text>            </div>        </tab-content>    </tabs></div>

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

在Previewer中运行程序

3 设置tab-bar和tab-content

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

名称

类型

默认值

必填

描述

mode

string

scrollable

否

设置组件宽度的可延展性。可选值为：

scrollable：子组件宽度为实际设置的宽度，当宽度之和（包括margin边距）大于tab-bar的宽度时，子组件可以横向滑动。fixed：子组件宽度均分tab-bar的宽度。

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

名称

类型

默认值

必填

描述

scrollable

boolean

true

否

是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。

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

<div class="container">    <tabs>        <tab-bar mode="fixed">            <text>第一页</text>            <text>第二页</text>        </tab-bar>        <tab-content scrollable="false">            <div class="text">                <text>第一页的内容</text>            </div>            <div class="text">                <text>第二页的内容</text>            </div>        </tab-content>    </tabs></div>

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

4 添加事件

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

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

<div class="container">    <tabs onchange="change">        <tab-bar mode="fixed">            <text>第一页</text>            <text>第二页</text>        </tab-bar>        <tab-content scrollable="false">            <div class="text">                <text>第一页的内容</text>            </div>            <div class="text">                <text>第二页的内容</text>            </div>        </tab-content>    </tabs></div>

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

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

在Previewer中运行程序

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