工具：EgretWing
说明：
List 列表组件
ItemRender 列表Item组件
这里只讲解一下如何绑定数据到List以及对应到ItemRender展示。
/**
* Created by haocao on 15/6/25.
*/
class FriendsListCase extends egret.gui.SkinnableComponent{
public constructor(){
super();
this.skinName = skins.scene.FriendsListSkin;
// 初始化数据
this.initListData();
}
// 绑定界面的List
public listview:egret.gui.List;
// 数据Array
private dataSource:Array<any> = [];
private initListData():void {
for (var i:number = 1; i < 50; i++) {
this.dataSource.push({name: "name"+i,phone:"a"+i,qq:"b"+i});
}
}
public partAdded(partName:string, instance:any):void {
super.partAdded(partName, instance);
if (instance == this.listview) {
// 绑定数据源
this.listview.dataProvider = new egret.gui.ArrayCollection(this.dataSource);
// 绑定itemview
this.listview.itemRenderer= new egret.gui.ClassFactory(FriendItemRender);
}
}
}
/**
*
* @caohao
*
*/
class FriendItemRender extends egret.gui.ItemRenderer{
public lname:egret.gui.Label;
public lphone:egret.gui.Label;
public lqq:egret.gui.Label;
public constructor() {
super();
// 皮肤名称
this.skinName = skins.scene.FriendsListItemSkin;
this.touchChildren = true;
}
public dataChanged():void{
// 将数据对应到组件上
this.lname.text = this.data.name;
this.lphone.text = this.data.phone;
this.lqq.text = this.data.qq;
}
}
最终效果图：
参考文章：
