【咸鱼教程】可自动滚动的聊天文本框

教程目录 
一 演示效果
二 实现原理
三 代码
四 Demo下载


一 演示效果
 


二 实现原理

Scroller + Label实现
 


Label动态高度，随着输入文本增加而增加。
每输入一行，则将Scroller的视口viewport垂直位置scrollV对齐到Label底端。

三 代码


exml
 

代码

[Actionscript3] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

/**  * 主页场景  * @author chenkai  * [url=home.php?mod=space&uid=81950]@since[/url] 2017/4/20  *  * 实现可自行滚动的聊天文本框  */ class HomeScene extends eui.Component{         private chatLabel:eui.Label;          //聊天记录         private inputLabel:eui.EditableText;  //输入文本         private okBtn:eui.Rect;               //确定         private chatScroller:eui.Scroller;    //聊天记录滚动容器           public constructor() {                 super();                 this.skinName = "HomeSceneSkin";         }           public childrenCreated(){                 this.okBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onOkTouch, this);         }           private onOkTouch(){                 //显示聊天记录                 if(this.chatLabel.text != ""){                         this.chatLabel.text +=  "\n" + this.inputLabel.text;                 }else{                         this.chatLabel.text +=  this.inputLabel.text;                 }                                   //文本高度大于滚动容器高度时，将视口置于文本最后一行                 if(this.chatLabel.height > this.chatScroller.height){                         this.chatScroller.viewport.scrollV = this.chatLabel.height - this.chatScroller.height;                 }                   //清空输入文本                 this.inputLabel.text = "";         } }

四 Demo下载

https://files-cdn.cnblogs.com/files/gamedaybyday/Egret3.2.6_ChatTextExample.7z