华为鸿蒙应用开发10JavaScriptUI常用容器组件Tabs

　　本章目标：
　　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文件中，写入如下代码                           第一页             第二页                                                第一页的内容                                           第二页的内容                           
　　在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除支持通用属性外，还支持如下属性：
　　名称
　　类型
　　默认值
　　必填
　　描述
　　mode
　　string
　　scrollable
　　否
　　设置组件宽度的可延展性。可选值为：scrollable：子组件宽度为实际设置的宽度，当宽度之和（包括margin边距）大于tab-bar的宽度时，子组件可以横向滑动。fixed：子组件宽度均分tab-bar的宽度。
　　tabcontent除支持通用属性外，还支持如下属性：
　　名称
　　类型
　　默认值
　　必填
　　描述
　　scrollable
　　boolean
　　true
　　否
　　是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。
　　修改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的基本用法就介绍到这里， 一定要自己动手多写代码，多体会。