__前言: __ 在前端游戏开发中,我们经常需要做滑动列表,或者列表翻页的效果,笔者最近接触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