Egret实现滚动排行榜

首先用EUI布局做好两个皮肤，主要就是列表的使用，主要代码：

class Rank extends eui.Component {

    private listGoods: eui.List;
   
    constructor() {
        super();
        this.addChild(new PlayMusic());
        this.addEventListener(eui.UIEvent.COMPLETE, this.uiCompHandler, this);
        this.skinName = "src/GameRank/rankUI.exml";
        this.once(egret.Event.ADDED_TO_STAGE, this.init, this);
    }


    //皮肤加载完成
    private uiCompHandler() {
        this.listGoods.itemRenderer = GoodsListIRSkin;

        this.listGoods.dataProvider = new eui.ArrayCollection(data)
    }

class GoodsListIRSkin extends eui.ItemRenderer {
    
    constructor() {
        super();
        this.addEventListener(eui.UIEvent.COMPLETE, this.uiCompHandler, this);
        this.skinName = "rankListUI";


    }
    private uiCompHandler() {
       
    }  
}

eui代码：

1.rankUI.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="rankUI" width="480" height="854" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
    <e:Image source="beijing_jpg" x="0" y="0" />
    <e:Image source="paihangbang_png" x="19" y="-8" scaleX="1" scaleY="1" />
    <e:Scroller id="RankList" width="310" height="258" x="90" y="367">
        <e:viewport>
            <e:List id="listGoods" width="300">
                <e:layout>
                    <e:VerticalLayout/>
                </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="xiala_png"  scale9Grid="1,1,4,4"/>
</e:Skin>
</e:VScrollBar>
</e:Skin>
    </e:Scroller>
    <e:Button id="btn_share" label="" x="26" y="678">
        <e:skinName>
            <e:Skin states="up,down,disabled">
                <e:Image width="95%" height="95%" width.down="100%" height.down="100%" source="fenxiangchoujiang_png" source.down="fenxiangchoujiang_png" />
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0" />
            </e:Skin>
        </e:skinName>
    </e:Button>
    <e:Button id="btn_again" label="" x="260" y="678">
        <e:skinName>
            <e:Skin states="up,down,disabled">
                <e:Image width="95%" height="95%" width.down="100%" height.down="100%" source="zaiwanyici_png" source.down="zaiwanyici_png" />
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0" />
            </e:Skin>
        </e:skinName>
    </e:Button>
<e:BitmapLabel id="rankLabel" x="106" y="278" width="64" height="47" text="16" font="btsz2_fnt" textAlign="center"/>
<e:BitmapLabel id="getScore" x="222" y="305" width="132" height="51" textAlign="center" text="1000" font="btsz2_fnt" scaleX="0.5" scaleY="0.4"/>
<e:Label id="nameLabel" text="忧郁小馒头" x="196" y="270" size="18" verticalAlign="middle" textAlign="center" height="25" width="103"/>
<e:Group id="touXiang" width="59" height="59" x="317" y="270">
<e:Image source="touxiang_png" x="0" y="0" width="59" height="59" scaleX="1" scaleY="1"/>
</e:Group>
</e:Skin>

2.rankListUI.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="rankListUI" width="300" height="82" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
<w:Config id="157db8bad37"/>
<e:Image source="dikuang_png" x="0" y="0" width="100%" height="100%"/>
    <e:BitmapLabel id="rankLabel" x="18" y="17" width="64" height="47" font="btsz2_fnt" textAlign="center" text="{data.order}"/>
<e:BitmapLabel id="getScore" x="132" y="46" width="132" height="51" textAlign="center" text="{data.score}" font="btsz2_fnt" scaleX="0.5" scaleY="0.4"/>
<e:Label id="nameLabel" x="106" y="13" width="103" height="25" size="23" verticalAlign="middle" textAlign="center" text="{data.nickname}"/>
<e:Image id="touXiang" x="226" y="10" width="59" height="59" scaleX="1" scaleY="1" source="{data.headimgurl}"/>
</e:Skin>