咱先不讲正文,先让我吐槽一会,我就想知道滚动文本啥的怎么做,自己做的一直没法滚动,结果,上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引擎,就可以看到下面的样子了
是不是以为现在就可以滚动了,错!代码都没挂上去呢,不信你运行试试
那么怎么挂载代码上去
好了,现在可以运行了,你可以用鼠标滚动内容了(滚动条样子跟我一开始说的不太一样,我之后再看看什么情况)