eui.TabBar
包 eui
类 public class TabBar
继承 eui.TabBar → eui.ListBase → eui.DataGroup → eui.Group → egret.DisplayObjectContainer → egret.DisplayObject → egret.EventDispatcher → egret.HashObject
TabBar 类显示一组相同的选项卡。一次可以选择一个选项卡，且默认情况下选择第一个选项卡。该组选项卡由 dataProvider 属性定义。每个选项卡的外观由 ItemRenderer 定义。可以使用 TabBar 控件设置 ViewStack 容器的活动子代，如下例所示：
<s:TabBar dataProvider="{viewStack}"/>
<s:ViewStack id="viewStack">
<s:Group name="tab1"/>
<s:Group name="tab2"/>
<s:Group name="tab3"/>
</s:ViewStack>
公共属性
| 属性 |
|---|
公共方法
| 方法 |
|---|
| TabBar() 构造函数 |
事件
| Events |
|---|
| egret.Event.CHANGE 选中的索引已经发生改变,注意：此事件仅在索引改变是由用户触摸操作引起时才抛出。 |
| egret.Event.CHANGING 选中的索引即将发生改变，可以通过调用事件对象的 preventDefault() 方法来阻止改变。 注意：此事件仅在索引改变是由用户触摸操作引起时才抛出。 |
| eui.ItemTapEvent.ITEM_TAP 项呈示器单击事件。 |
| egret.TouchEvent.TOUCH_CANCEL 取消触摸事件 |
| egret.Event.RESIZE 当UI组件的尺寸发生改变时调度 |
| eui.UIEvent.MOVE 当UI组件在父级容器中的位置发生改变时调度 |
| eui.UIEvent.CREATION_COMPLETE 当UI组件第一次被添加到舞台并完成初始化后调度 |
| egret.Event.ADDED 将显示对象添加到显示列表中时调度。 |
| egret.Event.ADDED_TO_STAGE 在将显示对象直接添加到舞台显示列表或将包含显示对象的子树添加至舞台显示列表中时调度。 |
| egret.Event.REMOVED 将要从显示列表中删除显示对象时调度。 |
| egret.Event.REMOVED_FROM_STAGE 在从显示列表中直接删除显示对象或删除包含显示对象的子树时调度。 |
| egret.Event.ENTER_FRAME [广播事件] 播放头进入新帧时调度。 |
| egret.Event.RENDER [广播事件] 将要更新和呈现显示列表时调度。 |
| egret.TouchEvent.TOUCH_MOVE 当用户触碰设备时进行调度，而且会连续调度，直到接触点被删除。 |
| egret.TouchEvent.TOUCH_BEGIN 当用户第一次触摸启用触摸的设备时（例如，用手指触摸手机屏幕）调度。 |
| egret.TouchEvent.TOUCH_END 当用户移除与启用触摸的设备的接触时（例如，将手指从屏幕上抬起）调度。 |
| egret.TouchEvent.TOUCH_TAP 当用户在启用触摸设备上的已启动接触的同一 DisplayObject 实例上抬起接触点时（例如，手机点击屏幕后抬起）调度。 |
| egret.TouchEvent.TOUCH_RELEASE_OUTSIDE 当用户在启用触摸设备上的已启动接触的不同 DisplayObject 实例上抬起接触点时（例如，按住屏幕上的某个对象,然后从它上面挪开后再松开手指）调度。 |
属性详细信息
方法详细信息
TabBar()
public TabBar()
构造函数。
- 支持版本:eui 1.0
- 运行平台:Web,Native
示例
Copy
class TabBarExample extends egret.Sprite {
public constructor() {
super();
var exml =
`<e:Group xmlns:e="http:/ns.egret.com/eui">
<e:TabBar dataProvider="{viewStack}">
<e:layout>
<e:HorizontalLayout gap="20"/>
</e:layout>
<e:itemRendererSkinName>
<e:Skin states="up,down" height="50">
<e:Label text="{data}" textColor.down="0xFFFFFF" textColor.up="0x666666" horizontalCenter="0" verticalCenter="0"/>
</e:Skin>
</e:itemRendererSkinName>
</e:TabBar>
<e:ViewStack y="50" id="viewStack">
<e:Group name="tab1">
<e:Label text="TestPanel1" x="50" y="50"/>
</e:Group>
<e:Group name="tab2">
<e:Label text="TestPanel2" x="50" y="50"/>
</e:Group>
</e:ViewStack>
</e:Group>`;
var clazz = EXML.parse(exml);
var group = new clazz();
this.addChild(group);
}
}
