Egret EUI Tab + ViewStack

参考：

Egret教程-选项卡

游戏中很多选项卡的UI。

官网教程说的不清楚。以前是用自己写的。这里用Eui的Tab+ViewStack实现一下。

1. 新建Tab的条目皮肤

第一个Image是按钮弹起时显示

第二个Image是按钮选中时显示

第三个Label的标签设置为{data}，用于显示ViewStack的内容name

进入exml的源码，设置第一张图片visible.down="false"，设置第二张图片visible.disabled="false", visible.up="false"

2. 拖动一个Tab组件到舞台

设置ID为tab，条目皮肤为TabBarSkin，布局为水平排列HorizontalLayout。

进入exml源码，设置数据源dataProvider="viewStack"，设置默认选择第一项selectedIndex="0"

3 拖动一个ViewStack到舞台

设置Viewstack的ID为viewstack

拖动3个按钮（或者自定义UI）到viewstack下，这3个按钮就相当于要切换的3个页面。

进入exml源码，设置按钮的name，这个name会映射到TabBarSkin上的Labe的{data}上。

4 代码里操作tab+viewstack

tab监听ITEM_TAP事件

/*** 主页* @author chenkai 2020.2.16*/
class HomeScene extends eui.Component{public tab:eui.TabBar;public viewStack:eui.ViewStack;public constructor() {super();this.skinName = "HomeSceneSkin";}protected childrenCreated(){this.tab.addEventListener(eui.ItemTapEvent.ITEM_TAP, this.itemTap, this);}private itemTap(e:eui.ItemTapEvent){//当点击第一个选项卡按钮时，下面输出为console.log(e.itemIndex, e.itemRenderer);  //0console.log(e.itemRenderer);               //第一个选项按钮实例console.log(this.viewStack.selectedIndex); //0 console.log(this.viewStack.selectedChild); //viewstack下的第一个Button实例}
}

实际效果：

问题：

1. 当按钮样式不同时，怎么整？

因为Tab用的条目皮肤是TabBarSkin是一个皮肤，当3个按钮，每个按钮外观不同时，就用不了了。

Laya的Tab+Viewstack使用方便，支持3个按钮使用1个皮肤，也支持3个按钮使用3个皮肤，Egret如果要实现，得自己写自定义组件了。

Egret EUI Tab + ViewStack相关推荐

egret.eui皮肤与组件(2)
* 使用egret EUI扩展库使用 1. 自定义组合组件(Button和ProgressBar)的制作: * 需要EUI自带Button和ProgressBar皮肤 * Button组件由三个子组件 ...
Egret eui.TextInput组件输入后未清掉焦点，微信浏览器切换后台再切回，点击会一直唤醒输入法的Bug
如题,碰到的情况呢,是egret发布为HTML5,在点击eui.TextInput组件进行输入时,如果切换到后台,再切回后,除非再点击其他eui.TextInput组件,不然点击屏幕其他地方,都会不停 ...
Egret eui.Scroller扩展
支持任意位置索引的增加和删除支持移动到顶部,底部以及任意索引位置支持官方eui.Scroller item填不满可视视图不能滑动的问题新增支持下拉刷新只会显示可视区域item以及缓冲item, ...
Html5 Egret游戏开发成语大挑战（二）干净的eui项目和资源准备
Html5 Egret游戏开发成语大挑战(二)干净的eui项目和资源准备现在我们使用egret来起步开发一个名叫<成语大挑战>的小游戏,关于egret的开发环境就不在这里啰嗦了,直接去 ...
Html5 Egret游戏开发成语大挑战（六）游戏界面构建和设计
Html5 Egret游戏开发成语大挑战(六)游戏界面构建和设计本篇将主要讲解游戏界面的构建和设计,会应用到egret.eui的自定义组件,可以很直观的构建一个游戏整体,这里我们仍然只需要使用Eg ...
白鹭引擎入门教程一（Egret）
1.下载并安装Egret引擎: http://www.egret.com/products/engine.html 2.命令行(Win+R键输入cmd): 有些喜欢用命令行的童鞋,可以通过命令行对白鹭 ...
Egret教程（一、入门）
1.下载并安装Egret引擎: http://www.egret.com/products/engine.html 2.命令行(Win+R键输入cmd): 有些喜欢用命令行的童鞋,可以通过命令行对白鹭 ...
egret 吸附_egret-ui-editor
Egret UI Editor 简介 Egret UI Editor是一款独立的UI编辑器,其主要功能是针对 Egret 项目中的 Exml 皮肤文件进行可视化编辑. 其与您看到的大多数编辑器一样,左 ...
Egret制作打砖块微信小游戏
使用Egret制作微信小游戏打砖块-包括好友排行榜项目创建与配置项目逻辑代码项目发布微信小游戏的开发项目所有代码项目创建与配置创建一个Egret EUI项目,默认库即可: 导入素材,在r ...
白鹭引擎5.1产品服务升级，推出云平台并大幅提升核心性能
12月4日,H5游戏引擎商白鹭科技为开发者正式推出了全新白鹭引擎启动器Egret Launcher,该版本在深度优化交互体验基础上,并整合了白鹭引擎5.1最新版本与代码编辑器Egret Wing 4. ...

Egret EUI Tab + ViewStack

问题：

Egret EUI Tab + ViewStack相关推荐

最新文章

热门文章