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

教程目录 
一 演示效果
二 实现原理
三 代码
四 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下载