Egret的滚动list列表如何使用

对于很多新人来说 总是在Egret群问这个问题 ，那么就来看看如何使用吧  ，很简单：

module gtm {

    export class FightMapControler extends  eui.Component {
    
        private mapScroller:eui.Scroller;
        private mLabel:eui.Label;
        private mapList:eui.List;
 
        private mapDatas:eui.ArrayCollection;
        
        constructor() {
            super();
            this.skinName = "MaptaskjionSkin";     
        }

        createChildren():void {
            super.createChildren();
			this.addItem();
        }

       
        private additem():void{
            //
            this.mapDatas = new eui.ArrayCollection();
            this.mapList.dataProvider = this.mapDatas;
            this.mapList.itemRenderer = FightMapItemRenderer;   //这是继承eui.ItemRenderer 的  FightMapItemRenderer类名 
            this.mapList.itemRendererSkinName = "FightMapItemSkin"; //这个是继承eui.ItemRenderer  FightMapItemRenderer类的皮肤
			let data =[1,2,3,4,5];
			for(var i=0;i<data.length;i++){
				this.mapDatas.addItem(data[i]);//这里是添加数据的关键
			}
        }
    }
}

module gtm {
	//这个类就是list列表的子项了，也就是每个item
    export class FightMapItemRenderer extends eui.ItemRenderer {
        private bgAsset:eui.Image;

        constructor() {
            super();
        }

        createChildren():void {
            super.createChildren();
           // this.bgAsset.addEventListener(egret.TouchEvent.TOUCH_TAP, this.btnClick, this);
            
        }
        
    
		//这个函数是ItemRenderer的虚函数  当FightMapControler的this.mapDatas.addItem(data[i])时会调用dataChanged（）
        dataChanged():void {
			//这里面的this.data是继承父类ItemRenderer 的data   也就是FightMapControler的this.mapDatas.addItem(data[i])里面的data的每一个元素
            super.dataChanged();
            if (this.data) {
				this.bg.source=this.data+"_png";
               }
         }
   }
}
下面这代是EXML里eui.list的
		<e:Scroller id= "mapScroller" height="743" width="540" y="300" scrollPolicyH="off" x="59">
			<e:viewport>
				<e:List id="mapList" height="770" width="540" x="26" y="146">
					<e:layout>
						<e:TileLayout requestedColumnCount="1" horizontalGap="2" verticalGap="3"/>
					</e:layout>
				</e:List>
			</e:viewport>
			<e:Skin>
				<e:VScrollBar id="verticalScrollBar" width="8" minHeight="100%" height="100%" right="0">
					<e:Skin>
						<e:Image id="thumb" width="8" source="hScrollBar02_png"  scale9Grid="1,1,4,4"/>
					</e:Skin>
				</e:VScrollBar>
			</e:Skin>
		</e:Scroller>




认真看完 发现so easy 如有疑问请留言