zoukankan      html  css  js  c++  java
  • 【咸鱼教程】可自动滚动的聊天文本框

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

  • 相关阅读:
    [macOS] git忽略所有的.DS_Store文件
    [macOS] finder变慢提速
    [React Native] change port when running react native
    转载: 我如何使用 Django + Vue.js 快速构建项目
    MySQL Connector/NET 使用小结(踩坑之路)
    C# 控制台程序(Console Application )启动后隐藏
    解决 pycharm can not save setting
    ubuntu 16.04 LTS 安装 teamviewer 13

    Python 编程规范梳理
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/9219933.html
Copyright © 2011-2022 走看看