1# tabs<a name="ZH-CN_TOPIC_0000001209252163"></a> 2 3tab页签容器。 4 5## 权限列表<a name="zh-cn_topic_0000001173324585_section11257113618419"></a> 6 7无 8 9## 子组件<a name="zh-cn_topic_0000001173324585_section9288143101012"></a> 10 11仅支持最多一个<[tab-bar](js-components-container-tab-bar.md)\>和最多一个<[tab-content](js-components-container-tab-content.md)\>。 12 13## 属性<a name="zh-cn_topic_0000001173324585_section2907183951110"></a> 14 15除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 16 17<a name="zh-cn_topic_0000001173324585_table20633101642315"></a> 18<table><thead align="left"><tr id="zh-cn_topic_0000001173324585_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173324585_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001173324585_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001173324585_aa872998ac2d84843a3c5161889afffef"></a>名称</p> 19</th> 20<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173324585_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001173324585_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001173324585_ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p> 21</th> 22<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173324585_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001173324585_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001173324585_ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p> 23</th> 24<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173324585_p824610360217"><a name="zh-cn_topic_0000001173324585_p824610360217"></a><a name="zh-cn_topic_0000001173324585_p824610360217"></a>必填</p> 25</th> 26<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173324585_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001173324585_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001173324585_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p> 27</th> 28</tr> 29</thead> 30<tbody><tr id="zh-cn_topic_0000001173324585_row188481425182510"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324585_p1123011311254"><a name="zh-cn_topic_0000001173324585_p1123011311254"></a><a name="zh-cn_topic_0000001173324585_p1123011311254"></a>index</p> 31</td> 32<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324585_p1223193122517"><a name="zh-cn_topic_0000001173324585_p1223193122517"></a><a name="zh-cn_topic_0000001173324585_p1223193122517"></a>number</p> 33</td> 34<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324585_p1523183172515"><a name="zh-cn_topic_0000001173324585_p1523183172515"></a><a name="zh-cn_topic_0000001173324585_p1523183172515"></a>0</p> 35</td> 36<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324585_p623183182516"><a name="zh-cn_topic_0000001173324585_p623183182516"></a><a name="zh-cn_topic_0000001173324585_p623183182516"></a>否</p> 37</td> 38<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324585_p13231103192517"><a name="zh-cn_topic_0000001173324585_p13231103192517"></a><a name="zh-cn_topic_0000001173324585_p13231103192517"></a>当前处于激活态的tab索引。</p> 39</td> 40</tr> 41<tr id="zh-cn_topic_0000001173324585_row0461622112513"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324585_p12311131122516"><a name="zh-cn_topic_0000001173324585_p12311131122516"></a><a name="zh-cn_topic_0000001173324585_p12311131122516"></a>vertical</p> 42</td> 43<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324585_p423110319253"><a name="zh-cn_topic_0000001173324585_p423110319253"></a><a name="zh-cn_topic_0000001173324585_p423110319253"></a>boolean</p> 44</td> 45<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324585_p1023118318252"><a name="zh-cn_topic_0000001173324585_p1023118318252"></a><a name="zh-cn_topic_0000001173324585_p1023118318252"></a>false</p> 46</td> 47<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324585_p42311331102516"><a name="zh-cn_topic_0000001173324585_p42311331102516"></a><a name="zh-cn_topic_0000001173324585_p42311331102516"></a>否</p> 48</td> 49<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324585_p10231123114251"><a name="zh-cn_topic_0000001173324585_p10231123114251"></a><a name="zh-cn_topic_0000001173324585_p10231123114251"></a>是否为纵向的tab，默认为false，可选值为：</p> 50<a name="zh-cn_topic_0000001173324585_ul8231123114251"></a><a name="zh-cn_topic_0000001173324585_ul8231123114251"></a><ul id="zh-cn_topic_0000001173324585_ul8231123114251"><li>false：tabbar和tabcontent上下排列。</li><li>true：tabbar和tabcontent左右排列。</li></ul> 51</td> 52</tr> 53</tbody> 54</table> 55 56## 样式<a name="zh-cn_topic_0000001173324585_section169548171376"></a> 57 58支持[通用样式](js-components-common-styles.md)。 59 60## 事件<a name="zh-cn_topic_0000001173324585_section3892191911214"></a> 61 62除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 63 64<a name="zh-cn_topic_0000001173324585_table836435619510"></a> 65<table><thead align="left"><tr id="zh-cn_topic_0000001173324585_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173324585_a426b8903842d48fa8012a24ff3c997eb"><a name="zh-cn_topic_0000001173324585_a426b8903842d48fa8012a24ff3c997eb"></a><a name="zh-cn_topic_0000001173324585_a426b8903842d48fa8012a24ff3c997eb"></a>名称</p> 66</th> 67<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173324585_a53448ba47e5e4ae9bf7774c90820e970"><a name="zh-cn_topic_0000001173324585_a53448ba47e5e4ae9bf7774c90820e970"></a><a name="zh-cn_topic_0000001173324585_a53448ba47e5e4ae9bf7774c90820e970"></a>参数</p> 68</th> 69<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173324585_add489ff50c444f24b759162c7f4bad9a"><a name="zh-cn_topic_0000001173324585_add489ff50c444f24b759162c7f4bad9a"></a><a name="zh-cn_topic_0000001173324585_add489ff50c444f24b759162c7f4bad9a"></a>描述</p> 70</th> 71</tr> 72</thead> 73<tbody><tr id="zh-cn_topic_0000001173324585_row4918151132616"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324585_p661018582267"><a name="zh-cn_topic_0000001173324585_p661018582267"></a><a name="zh-cn_topic_0000001173324585_p661018582267"></a>change</p> 74</td> 75<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324585_p15610135815262"><a name="zh-cn_topic_0000001173324585_p15610135815262"></a><a name="zh-cn_topic_0000001173324585_p15610135815262"></a>{ index: indexValue }</p> 76</td> 77<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324585_p161015852613"><a name="zh-cn_topic_0000001173324585_p161015852613"></a><a name="zh-cn_topic_0000001173324585_p161015852613"></a>tab页签切换后触发。</p> 78<div class="note" id="zh-cn_topic_0000001173324585_note1551155885118"><a name="zh-cn_topic_0000001173324585_note1551155885118"></a><a name="zh-cn_topic_0000001173324585_note1551155885118"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324585_p1251125818519"><a name="zh-cn_topic_0000001173324585_p1251125818519"></a><a name="zh-cn_topic_0000001173324585_p1251125818519"></a>动态修改index值不会触发该回调。</p> 79</div></div> 80</td> 81</tr> 82</tbody> 83</table> 84 85## 示例<a name="zh-cn_topic_0000001173324585_section14993155318710"></a> 86 87``` 88<!-- xxx.hml --> 89<div class="container"> 90 <tabs class = "tabs" index="0" vertical="false" onchange="change"> 91 <tab-bar class="tab-bar" mode="fixed"> 92 <text class="tab-text">Home</text> 93 <text class="tab-text">Index</text> 94 <text class="tab-text">Detail</text> 95 </tab-bar> 96 <tab-content class="tabcontent" scrollable="true"> 97 <div class="item-content" > 98 <text class="item-title">First screen</text> 99 </div> 100 <div class="item-content" > 101 <text class="item-title">Second screen</text> 102 </div> 103 <div class="item-content" > 104 <text class="item-title">Third screen</text> 105 </div> 106 </tab-content> 107 </tabs> 108</div> 109``` 110 111``` 112/* xxx.css */ 113.container { 114 flex-direction: column; 115 justify-content: flex-start; 116 align-items: center; 117} 118.tabs { 119 width: 100%; 120} 121.tabcontent { 122 width: 100%; 123 height: 80%; 124 justify-content: center; 125} 126.item-content { 127 height: 100%; 128 justify-content: center; 129} 130.item-title { 131 font-size: 60px; 132} 133.tab-bar { 134 margin: 10px; 135 height: 60px; 136 border-color: #007dff; 137 border-width: 1px; 138} 139.tab-text { 140 width: 300px; 141 text-align: center; 142} 143``` 144 145``` 146// xxx.js 147export default { 148 change: function(e) { 149 console.log("Tab index: " + e.index); 150 }, 151} 152``` 153 154 155 156
