• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# tabs开发指导
2
3tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。具体用法请参考[tabs API](../reference/arkui-js/js-components-container-tabs.md)。
4
5
6## 创建tabs
7
8在pages/index目录下的hml文件中创建一个tabs组件。
9
10```html
11<!-- xxx.hml -->
12<div class="container">
13    <tabs>
14        <tab-bar>
15            <text>item1</text>
16            <text>item2</text>
17        </tab-bar>
18        <tab-content class="tabContent">
19            <div class="text">
20                <text>content1</text>
21            </div>
22            <div class="text">
23                <text>content2</text>
24            </div>
25        </tab-content>
26    </tabs>
27</div>
28```
29
30```css
31/* xxx.css */
32.container {
33  flex-direction: column;
34  justify-content: center;
35  align-items: center;
36  background-color: #F1F3F5;
37}
38.tabContent{
39  width: 100%;
40  height: 100%;
41}
42.text{
43  width: 100%;
44  height: 100%;
45  justify-content: center;
46  align-items: center;
47}
48```
49
50![zh-cn_image_0000001165191390](figures/zh-cn_image_0000001165191390.gif)
51
52
53
54
55## 设置样式
56
57设置tabs背景色及边框和tab-content布局。
58```html
59<!-- xxx.hml -->
60<div class="container">
61  <tabs class="tabs">
62    <tab-bar class="tabBar">
63      <text class="tabBarItem">item1</text>
64      <text class="tabBarItem">item2</text>
65    </tab-bar>
66    <tab-content class="tabContent">
67      <div class="tabContent">
68        <text>content1</text>
69      </div>
70      <div class="tabContent" >
71        <text>content2</text>
72      </div>
73    </tab-content>
74  </tabs>
75</div>
76```
77
78```css
79/* xxx.css */
80.container {
81  flex-direction: column;
82  justify-content: flex-start;
83  align-items: center;
84 background-color:#F1F3F5;
85}
86.tabs{
87  margin-top: 20px;
88 border: 1px solid #2262ef;
89  width: 99%;
90  padding: 10px;
91}
92.tabBar{
93  width: 100%;
94  border: 1px solid #78abec;
95}
96.tabContent{
97  width: 100%;
98  margin-top: 10px;
99  height: 300px;
100  color: blue;
101  justify-content: center;
102  align-items: center;
103}
104```
105
106![zh-cn_image_0000001163388642](figures/zh-cn_image_0000001163388642.gif)
107
108
109## 显示页签索引
110
111开发者可以为tabs添加change事件，实现页签切换后显示当前页签索引的功能。
112
113```html
114<!-- xxx.hml -->
115<div class="container" style="background-color:#F1F3F5;">
116  <tabs class="tabs" onchange="tabChange">
117    <tab-bar class="tabBar">
118      <text class="tabBarItem">item1</text>
119      <text class="tabBarItem">item2</text>
120    </tab-bar>
121    <tab-content class="tabContent">
122      <div>
123        <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
124      </div>
125      <div>
126        <image src="common/images/img1.jpg" style="object-fit: contain;"> </image>
127      </div>
128    </tab-content>
129  </tabs>
130</div>
131```
132
133```js
134// xxx.js
135import promptAction from '@ohos.promptAction';
136export default {
137  tabChange(e){
138    promptAction.showToast({
139      message: "Tab index: " + e.index
140    })
141  }
142}
143```
144
145![zh-cn_image_0000001163228638](figures/zh-cn_image_0000001163228638.gif)
146
147
148> **说明：**
149>
150> tabs子组件仅支持一个[\<tab-bar>](../reference/arkui-js/js-components-container-tab-bar.md)和一个[\<tab-content>](../reference/arkui-js/js-components-container-tab-content.md)。
151
152
153## 场景示例
154
155在本场景中，开发者可以点击标签切换内容，选中后标签文字颜色变红，并显示下划线。
156
157用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。
158
159```html
160<!-- xxx.hml -->
161<div class="container">
162  <tabs onchange="changeTabactive">
163    <tab-content>
164      <div class="item-container" for="datas.list">
165        <div if="{{$item.title=='List1'?true:false}}">
166          <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
167        </div>
168        <div if="{{$item.title=='List2'?true:false}}">
169          <image src="common/images/img1.jpg" style="object-fit: none;"> </image>
170        </div>
171        <div if="{{$item.title=='List3'?true:false}}">
172          <image src="common/images/img2.jpg" style="object-fit: contain;"> </image>
173        </div>
174      </div>
175    </tab-content>
176    <tab-bar class="tab_bar mytabs" mode="scrollable">
177      <div class="tab_item" for="datas.list">
178        <text style="color: {{$item.color}};">{{$item.title}}</text>
179        <div class="underline-show" if="{{$item.show}}"></div>
180        <div class="underline-hide" if="{{!$item.show}}"></div>
181      </div>
182    </tab-bar>
183  </tabs>
184</div>
185```
186
187```css
188/* xxx.css */
189.container{
190width: 100%;
191height: 100%;
192background-color:#F1F3F5;
193}
194.tab_bar {
195  width: 100%;
196  height: 150px;
197}
198.tab_item {
199  height: 30%;
200  flex-direction: column;
201  align-items: center;
202}
203.tab_item text {
204  font-size: 32px;
205}
206.item-container {
207  justify-content: center;
208  flex-direction: column;
209}
210.underline-show {
211  height: 2px;
212  width: 160px;
213  background-color: #FF4500;
214  margin-top: 7.5px;
215}
216.underline-hide {
217  height: 2px;
218  margin-top: 7.5px;
219  width: 160px;
220}
221```
222
223```js
224// xxx.js
225import promptAction from '@ohos.promptAction';
226export default {
227  data() {
228    return {
229      datas: {
230        color_normal: '#878787',
231        color_active: '#ff4500',
232        show: true,
233        list: [{
234          i: 0,
235          color: '#ff4500',
236          show: true,
237          title: 'List1'
238        }, {
239          i: 1,
240          color: '#878787',
241          show: false,
242          title: 'List2'
243        }, {
244           i: 2,
245           color: '#878787',
246           show: false,
247           title: 'List3'
248        }]
249      }
250    }
251  },
252  changeTabactive (e) {
253    for (let i = 0; i < this.datas.list.length; i++) {
254      let element = this.datas.list[i];
255      element.show = false;
256      element.color = this.datas.color_normal;
257      if (i === e.index) {
258        element.show = true;
259        element.color = this.datas.color_active;
260      }
261    }
262  }
263}
264```
265
266![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif)
267
268
269## 相关实例
270
271针对tabs开发，有以下相关实例可供参考：
272
273- [`JsComponentCollection`：JS组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/code/UI/JsComponentClollection/JsComponentCollection)