Laya实现滑动列表和翻页效果及优化

__前言： __ 在前端游戏开发中，我们经常需要做滑动列表，或者列表翻页的效果，笔者最近接触Laya编辑器，看官方的文档真的是看的生气，索性参照其他编辑器的方式实现了想要的效果，这里整理出来。

效果展示：

前期准备：

这里要先创建一个List组件，为其添加一个scrollerBar,(这里根据需求，如果需要垂直方向滑动就加VscrollerBar)，

需要注意的是，List组件的name需要写

render

,renderType属性要选择

render

.HscrollerBar的name也要写

scrollBar

.(官网文档就是这么强调的，我也没办法)，然后给你的List定义一个名称，我这里用的是

proGp

;好了，准备好这些，我们开始写代码。

代码示例：

private initProductGp() {
        // ...
        this.proGp.itemRender = ProductItem;
        this.proGp.renderHandler = new Laya.Handler(this, this.updateItem);

        let dataArr = [
            { "typeImage": 0, "doneTime": 1e4 }, { "typeImage": 1, "doneTime": 2e4 }, { "typeImage": 2, "doneTime": 1e4 },
            { "typeImage": 3, "doneTime": 1e4 }, { "typeImage": 4, "doneTime": 2e4 }, { "typeImage": 5, "doneTime": 1e4 },
            { "typeImage": 6, "doneTime": 1e4 }, { "typeImage": 7, "doneTime": 2e4 }, { "typeImage": 8, "doneTime": 1e4 },
            { "typeImage": 9, "doneTime": 2e4 }, { "typeImage": 10, "doneTime": 1e4 }, { "typeImage": 11, "doneTime": 1e4 }
        ];
        // 给数据源赋值
        this.proGp.array = dataArr;
        // 设置滑动条隐藏
        this.proGp.scrollBar.hide = true;
        // 设置滚轮滑动为false，默认为true
        // ... 这里是展示翻页效果，如果需要滑动的效果，这两个
        // ... 属性可以忽略，使用默认值即可
        this.proGp.scrollBar.mouseWheelEnable = false;
        // 设置是否开启触摸，默认值为true
        this.proGp.scrollBar.touchScrollEnable = false;
        this.proGp.scrollBar.changeHandler = new Laya.Handler(this, this.onScrollerChange);
        // 初始化完，先执行一次,
        this.onScrollerChange();
    }
    /***赋值数据源***/
    private updateItem(cell: ProductItem, index: number): void {
        cell.setData(true, cell.dataSource);
    }
           

这里说明一下ProductItem这个类.这个类是一个继承自页面的类，需要我们注意的是，我们不能在构造函数里给它自身的data赋值，因为我们是作为List列表的render去使用的，在render的过程中，会由于异步的问题，导致在new的时候还没有接受到数据源。从而导致对对象的赋值失败。所以我们要写一个public的方法，来给data赋值。（在egret中，只要继承了itemRender类，就可以重写它的dataChange方法，同样的道理。）

class ProductItem extends ui.work.ProductItemUI {
    private _data: ProductData;
    constructor() {
        super();
    }
    public setData(data: ProductData) {
        this._data = data;
        this.img_product.skin = `work/proM_${this._data.typeImage + 1001}.png`;
    }
 }
           

这个时候，我们的滑动滚动列表就可以实现了，接下来是翻页的效果实现。

// 这里按一下翻页，一次翻5种原料.
    private nextPage() {
        let scrollV = this.proGp.scrollBar.value + (GameGlobal.PRODUCT_WIDTH * 5);
        if (scrollV >= (GameGlobal.PRODUCT_WIDTH * 7)) {
            scrollV = (GameGlobal.PRODUCT_WIDTH * 7);
        }
        Laya.Tween.to(this.proGp.scrollBar, { value: scrollV }, 500, Laya.Ease.sineInOut);
    }
    private previousPage() {
        let scrollV = this.proGp.scrollBar.value - (GameGlobal.PRODUCT_WIDTH * 5);
        if (scrollV <= 0) {
            scrollV = 0;
        }
        Laya.Tween.to(this.proGp.scrollBar, { value: scrollV }, 500, Laya.Ease.sineInOut);
    }
    /***滚动条位置变化回调***/
    private onScrollerChange() {
    // 这里是设置翻页箭头的隐藏和显示，如果没有这个需求也可以忽略
        if (this.proGp.scrollBar.value <= 0) {
            this.previousBtn.visible = false;
        }
        else if (this.proGp.scrollBar.value >= (GameGlobal.PRODUCT_WIDTH * 7)) {
            this.nextBtn.visible = false;
        }
        else {
            this.previousBtn.visible = this.nextBtn.visible = true;
        }
    }
           

这里我用Tween做了一个缓动的翻页效果，大家可以根据自己的需求自行更改。

结束语：

好了，一个简单的滑动列表加翻页列表的效果就做完了，其实不止前端的东西，只要是做开发，不管途径和方式有多少种，编程思想都是一致的，我们不能光看到前端方向有五花八门的引擎，有各种各样的语言就望而却步，只要我们掌握了核心的思想，换不同的开发工具都没问题，不同的开发语言，只不过是API的不同罢了。希望大家都能在前端开发的过程中顺风顺水！

如果我的文章帮助到了你，或者给你提供了一些思路，麻烦给我点个赞鼓励一下我，嘻嘻~

推荐一个非常简单好用的GIF录制工具：GifCam