Laya-滚动文本demo制作

咱先不讲正文，先让我吐槽一会，我就想知道滚动文本啥的怎么做，自己做的一直没法滚动，结果，上laya官网照着做发现那他妈里面有些地方压根就不知道怎么做，然后我又去翻了几篇关于laya滚动文本制作的文章，看的是真的火大。写技术文章不应该是给别人看懂的么，他们写的什么鬼啊，新手看不懂、高手又不需要的，神经病啊。

先展示最终效果

好了，开始正文。我一步步来，从新建空项目开始讲。

首先自然是新建一个场景，对这Scenes右键，选择新建->页面/场景。这里我取的名字是test

   

双击test.scene，然后在左下角那里的层级右键，选择创建组件-->List  

创建好list组件之后调整它的大小和位置，

创建组件的方式截图不好截，还是直接拖组件吧，各位自己选喜欢的方式哈

  

然后随便改下Box的大小

为了容易看出效果来，我们在Box中创建Labal组件

想让Label组件直接跟父元素同样大小的话，可以在右侧属性面板中修改，图片看不清的话请放大看

 

开始干活，首先我们先双击List组件，然后在右侧的属性面板中找到renderType，将它设置为renderType:render

其次，我们给这个List组件添加上一个滚动条

其次，我们需要设置下面这些

 

然后咱们来设置里边的Box组件，将Box组件 右侧属性面板中的renderType属性值设置为render。

在Script文件夹中新建一个脚本文件，取名随你喜欢，我的是取名scrollCtr

 

随后打开代码编辑器，修改scrollCtr.ts代码

代码贴在下面了，各位自取

export default class ScrollCtr extends Laya.Script {
    private mlist: Laya.List;
    constructor() {
        super();
    }
    onAwake() {
        // 使用这串代码需要先将代码挂载到对应的组件上，不然找不到this指向谁的
        let self = this.owner;
        
        // 这里的mList并不是一定要跟被挂载的组件同名的，
        // 你看上面是不是写了private mlist: Laya.List,嗯，是跟这一个同名的
        this.mlist = self as Laya.List;

        // 这段是将mlist的内容填充
        var data: Array<any> = [];
        for(var m:number =0;m<20;m++){
             data.push({m_label:"No."+m});
        }
        this.mlist.array = data;

        // 橡皮筋回弹时间
        this.mlist.scrollBar.elasticBackTime = 100;
        // 橡皮筋效果极限距离，0为没有橡皮筋效果。
        this.mlist.scrollBar.elasticDistance = 100;
        // 获取或设置表示最低滚动位置的数字
        this.mlist.scrollBar.min = 0;
        // 获取或设置表示最高滚动位置的数字。
        this.mlist.scrollBar.max = 2000;
    }

    onUpdate() {

    }
}

现在返回laya引擎，就可以看到下面的样子了

是不是以为现在就可以滚动了，错！代码都没挂上去呢，不信你运行试试

那么怎么挂载代码上去

好了，现在可以运行了，你可以用鼠标滚动内容了（滚动条样子跟我一开始说的不太一样，我之后再看看什么情况）