Laya List组件使用示例以及相关说明(JS)

  • A+
所属分类：H5 laya

Laya List组件使用示例以及相关说明

List 组件可显示项目列表。是UI设计中常用的一个组件。以下通过一个js例子来演示List的用法以及相关API的使用。

示例程序

var WID = 40, HEI = 40;
function CellItem() {
    CellItem.__super.call(this);
    this.size(WID, HEI);
    this.clip = new Laya.Clip("comp/clip_num.png", 10);
    this.addChild(this.clip);
    this.setImg = function(index) {
        this.clip.index = index;
        console.log("CellItem", this.dataSource);
    }
}
Laya.class(CellItem, "CellItem", Laya.Box);

function setUp() {
    var list = new Laya.List();
    /** 单元格渲染器 */
    list.itemRender = CellItem;
    /** 水平方向显示的单元格数量 */
    list.repeatX = 4;
    /** 垂直方向显示的单元格数量 */
    list.repeatY = 1;
    /** 调整list位置 */
    list.x = (Laya.stage.width - WID) / 2;
    list.y = (Laya.stage.height - HEI * list.repeatY) / 2;
    // 使用但隐藏滚动条
    list.vScrollBarSkin = "";
    list.hScrollBarSkin = "";
    /** 设置为可以选择 */
    list.selectEnable = true;

    function updateItem(cell, index)
    {
        console.log("dddd", cell.dataSource);
        cell.setImg(cell.dataSource.index);
    }
    function onSelect(index)
    {
        console.log("当前选择的索引：" + index);
    }

    /** 改变 List 的选择项时执行的处理器 */
    list.selectHandler = new Laya.Handler(this, onSelect);
    /** 单元格渲染处理器 */
    list.renderHandler = new Laya.Handler(this, updateItem);
    /** 添加list到舞台 */
    Laya.stage.addChild(list);

    // 设置数据项为对应图片的路径
    var data = [];
    for (var i = 0; i < 7; ++i)
    {
        data.push({"index":i});
    }
    list.array = data;
    console.log(list.array);
    list.addItem(9);
    console.log(list.array);
    list.changeItem(7, {"index":7});
    console.log(list.getItem(7));
    list.deleteItem(1);
    console.log(list.array);
    console.log(list.dataSource);
    list.getItem(1)["test"] = "test";
    console.log(list.getItem(1));
}


Laya.init(800, 600);
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
Laya.stage.bgColor = "#232628";
setUp();

详细说明

  1. 代码中定义了CellItem类来作为列表的每一项所关联的对象。
  2. 通过list.itemRender = CellItem;这一行代码，使之相互关联。
  3. 通过list.selectEnable = true;打开了可以选择的设置，并且list.selectHandler = new Laya.Handler(this, onSelect);绑定了当前选中变化时的处理器。一但对改列表项进行点击或者对列表的selectedIndex的直接进行赋值的时候都会触发选中变化处理器selectHandler。
  4. 观察函数function updateItem(cell, index)可以发现，在该函数中我对cell执行了setImg方法，而这个方法是我定义在CellItem中的，这里可以看出updateItem函数传递的参数cell是通过list.itemRender = CellItem;关联的CellItem对象的一个实例。
  5. 上述代码中先后执行了list.vScrollBarSkin = "";和list.hScrollBarSkin = "";。但是运行程序后，可以看到程序的运行结果是只有水平方向的滚动条生效了，也就是后设置的生效了，而先设置的无效。
  6. array列表数据源字段。
var data = [];
for (var i = 0; i < 7; ++i)
{
    data.push({"index":i});
}
list.array = data;
console.log(list.array);

array数组的长度是跟List的项数一致的。一旦数组长度发生变化，列表的项数也随之发生变化。此处的console.log(list.array);的输出结果如下:

[Object, Object, Object, Object, Object, Object, Object]
  1. addItem方法,通过addItem方法也可以方列表中增加项。该方法也会导致array数组长度发生变化。
list.addItem(9);
console.log(list.array);

此处console.log(list.array);的输出结果如下:

[Object, Object, Object, Object, Object, Object, Object, 9]
  1. changeItem方法可以改变项对应的数据。但是是直接使用传递的object值替换掉原先的数据。
list.changeItem(7, {"index":7});
console.log(list.getItem(7));

此处console.log(list.getItem(7));的输出结果如下:

Object {index: 7}
  1. deleteItem方法可以删除对应项，会导致array数组长度发生变化。
list.deleteItem(1);
console.log(list.array);

此处console.log(list.array);的输出结果如下:

[Object, Object, Object, Object, Object, Object, Object]
  1. 列表的dataSource，用来保存供列表自己使用的数据，由于此处我没有用到所以console.log(list.dataSource);的输出结果为null。
  2. getItem方法可以返回指定列表项的数据，并且可以对其进行修改，比如增加字段，或者修改字段的值。
list.getItem(1)["test"] = "test";
console.log(list.getItem(1));

此处console.log(list.getItem(1));的输出结果如下：

Object {index: 2, test: "test"}
  1. 关于list.renderHandler = new Laya.Handler(this, updateItem);绑定的updateItem方法的调用和执行。当开始时列表被添加到舞台后，列表会根据列表项的宽高，以及水平和垂直方向显示的单元格数量，计算出列表宽高范围内可以显示出的总列表项的数量N,执行N次updateItem方法。这里要注意的是，如果array数组长度达不到N，但是仍然会有N个项执行了updateItem方法，虽然最后显示出来的只有array数组长度的项数。另外就是选中触发selectHandler的时候，也是会导N个列表项执行updateItem方法。

  2. 列表项的dataSource字段。

function CellItem() {
    CellItem.__super.call(this);
    this.size(WID, HEI);
    this.clip = new Laya.Clip("comp/clip_num.png", 10);
    this.addChild(this.clip);
    this.setImg = function(index) {
        this.clip.index = index;
        console.log("CellItem", this.dataSource);
    }
}

function updateItem(cell, index)
{
    console.log("dddd", cell.dataSource);
    cell.setImg(cell.dataSource.index);
}

上述代码的输出结果如下：

dddd Object {index: 0}
CellItem Object {index: 0}
dddd Object {index: 2, test: "test"}
CellItem Object {index: 2, test: "test"}
dddd Object {index: 3}
CellItem Object {index: 3}
dddd Object {index: 4}
CellItem Object {index: 4}
dddd Object {index: 5}
CellItem Object {index: 5}

虽然我们从始至终都没有直接给列表项的dataSource字段进行过赋值操作，但是从上面的输出结果看出，其被赋予了值，而且其值是与我往array数组中设置的值一致的。也就是说，改变了array数组中的数据，也会导致与其相关联的数据对象的dataSource发生变化。

  1. 在renderHandler绑定的方法中，不要对对应列表项的dataSource进行赋值操作，否则会导致死循环的发生。

  2. 不能直接使用list.array.push来添加对象，如果进行这种操作，需要调用列表刷新函数或者list.array = list.array使其触发刷新，否则滚动条的_scrollSize值为默认值，会导致滚动条无法滚动。

百分购

发表评论

您必须才能发表评论！