EUI List列表實現人物列表 (List的Item復用，Item獲取)

 

一  Scroll+List ，拖動組件到exml。

List不能寫定高度，不然無法自動擴展。

 

 二 新建List條目皮膚， ListItemSkin皮膚

條目皮膚下有：一個紅色背景Rect，頭像Image，昵稱Label

 

名字Label的文本{data.name}

 

 

 

頭像Image的資源{data.headUrl}

 

三  代碼設置數據源

將帶頭像和名字的數組hero封裝到ArrayCollection中，然后賦值給List的數據源dataProvider即可。

private heroList:eui.List; public constructor() { super(); this.skinName = "HomeSceneSkin"; } public childrenCreated(){ var heroArr:Array<Object> = [ { headUrl:"off_png", name:"peter"}, { headUrl:"off_png",name: "marry" }, { headUrl: "off_png",name: "peter" }, { headUrl: "off_png",name: "marry" }, { headUrl: "off_png",name: "peter" }, { headUrl: "off_png",name: "marry" } ]; this.heroList.dataProvider = new eui.ArrayCollection(heroArr); }

 

 

 

問題：

 

1.List的Item的復用

以下代碼會讓List在固定高度時也會在Scroller中滾動。並且List中的item是重復使用的。例如List只顯示5個Item的情況下，數據源有100個，在滾動容器時，會使用這5個Item來循環使用。

public testList:eui.List
public testScroller:eui.Scroller;
this.testScroller.viewport = this.testList;

 

2. 獲取List的選項Item

假設有一個List是manList，獲取manList的item實例

如果是剛賦值給這個manList，不延遲的話，初始化未完成，是獲取不到的item的實例的 = =

 

 

let manList:eui.List;
    
egret.Tween.get(this).wait(50).call(()=>{
    console.log(this.manList.numChildren);      //3
    console.log(this.manList.getChildAt(0));    //item實例
},this);