egret消息滚动自动播放器--消息公告

关注微信公众号：每日玩机 获取ios、Android、tv、mac黑科技软件

实现类似消息滚动样式 常用于公告等

具体实现如下：

1. 新建一个eui组件，并在exml问价下加入以下代码

<e:Group id="broadcast" width="500" x="125" y="410">
			<e:Rect width="500" x="0" y="0" scaleX="1" scaleY="1" ellipseWidth="50" ellipseHeight="50" anchorOffsetY="0"
			        height="35" fillAlpha="0.6" />
			<e:Scroller skinName="scroller" id="btn_scroller" scrollPolicyH="off" anchorOffsetY="0" anchorOffsetX="0" width="500"
			            height="35" horizontalCenter="0">
				<e:List id="btn_list" y="0" horizontalCenter="30.5" anchorOffsetX="0" height="35" width="560.61"></e:List>
			</e:Scroller>
</e:Group>

2. 在对应的ts文件下

	//获取
	public btn_list: eui.List;
	public btn_scroller: eui.Scroller;
	
	public move(){
		//初始化数据
		var broadcastData = [
			{ 'content': "恭喜11111XXX提现了多少元" },
			{ 'content': "恭喜22222XXX兑换现金多少元" },
			{ 'content': "恭喜33333XXX兑换现金多少元" },
			{ 'content': "恭喜44444XXX兑换现金多少元" },
			{ 'content': "恭喜55555XXX兑换现金多少元" },
		];
		this.btn_list.dataProvider = new eui.ArrayCollection(broadcastData)
		//调用数据的模板文件，具体如下一步骤
		this.btn_list.itemRenderer = broadcast_item;
		this.btn_scroller.viewport = this.btn_list
		//消息广播滚动
		var timer = new egret.Timer(500, 0);
		timer.addEventListener(egret.TimerEvent.TIMER, () => {
			//判断是否滚动到最底部 是则返回最顶部，否则向下滚动
			if (this.btn_scroller.viewport.scrollV == this.btn_scroller.viewport.contentHeight - this.btn_scroller.height) {
				this.btn_scroller.viewport.scrollV = 0 ;
			} else {
				this.btn_scroller.viewport.scrollV = this.btn_scroller.viewport.scrollV + this.btn_scroller.height 
			}
		}, this);
		timer.start();
	}

3. 新建内容模板，创建一个新的eui组件，在对应的exml文件下加入

    <e:Label id="content" fontFamily="gameFont" size="18" horizontalCenter="0" verticalCenter="0" />

4. 模板对应的ts问价如下

class broadcast_item extends eui.ItemRenderer {
	public content: eui.Label
	public constructor() {
		super();
		this.skinName = "resource/eui_skins/pages/singles/broadcast_item.exml";
	}

	protected dataChanged() {
		this.content.text = '' + this.data.content;
	}
}