任务6：利用scrollBar控制滚动文本

一、任务目标

上一个任务我们讲到文本控制在游戏中的主要作用，而且采用鼠标点击文本域从而控制文本滚动，那么该任务我们就来学习scrollBar控制文本的滚动。

二、任务分解

2.1 熟悉scrollBar常用属性

官方API：https://layaair2.ldc2.layabox.com/api2/Chinese/index.html?version=2.12.1beta&type=2D&category=UI&class=laya_ui_scrollbar.scrollbar#changehandler

• 从上图我们可以发现scrollBar由一个滑条，一个滑块，两个按钮组成
• min和max属性分别控制scrollBar的最小和最大滑动量，一般默认为0和1，无需改动
• scrollSize控制每次点击左右按钮时，滑块的滑动量
• value当前滚动条的进度值
• 其余属性可以在IDE中将鼠标放到对应属性上查看提示，也是很详细的

2.2 替换scrollBar皮肤的方法

上面我们说到scrollBar由一个滑条，一个滑块，两个按钮组成，那么我们如何用自定义的皮肤呢？其实IDE中这些多元素的组件都有自己皮肤的命名规则，如图：

可以看到，主元素为滑条，他的命名是hscroll，而其他元素的命名都有$这个符号，根据对应的图片命名规则，将我们的自定义图片也改为同名，就可以替换皮肤啦。

• 其中bar，down，up有三个样式，这和按钮Button的三态类似，其实就是将图片等比分割来表示正常状态，鼠标放上，鼠标点击三个状态，如果不清楚可以查看相关资料

2.3 控制文本滚动

2.3.1 为scrollBar添加监听器控制文本滚动

该方法的实现思路是利用监听器监听scrollBar的状态变化，当发生变化时利用代码控制文本的滚动量scrollX或者scrollY，从而达到控制文本滚动的目的。

export default class scrollBar_test extends Laya.Script {
   

    /** @prop {name:text,tips:"文本对象",type:Node,default=null} */
    text: Laya.Text;

    /** @prop {name:scrollBar,tips:"scrollBar对象",type:Node,default=null} */
    scrollBar: Laya.ScrollBar;

    constructor() {
    super(); }

    onAwake() {
   
        this.text.text = "亲爱的魂师您好，为带来更好的游戏体验，我们将进行以下更新与优化：\n" +

        "【优化】宗门浇水优化，点击浇水就直接浇水成功，不用再打开板面；\n" +
        
        "【新增】巅峰演武增加各个章节的通关榜记录，可查看玩家当前通关的层数；\n" +
        
        "【新增】落日森林可选择旧等级区域进行挑战；\n" +
        
        "【修正】修正独孤雁碧鳞突刺技能伤害异常!";