egret之好友列表（滑動列表）

本文采用List+Scroller實現列表滑動功能

首先新建兩個皮膚，一個用做好友界面的顯示，一個用作單個好友的顯示，新建皮膚如下：

皮膚一取名為：wxMainSkin，添加如下控件

 

皮膚一取名為：wxMainSkin，添加如下控件

新建ts腳本，添加如下代碼：

// TypeScript file
class WxMainPanel extends eui.Component {

    private listFriends: eui.List;
    private scrListFriends: eui.Scroller;

    public constructor() {
        super();
        this.skinName = "wxMainSkin";
        this.init();
    }
    
    private init() {
        var dp: eui.ICollection = this.listFriends.dataProvider;
        /// 填充數據
        var dsListFriends: Array<Object> = [
            { icon: "Scene_BaiQin_jpg", friendName: "伊文捷琳", comment: "評價：櫻桃小丸子", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "亞特伍德", comment: "評價：離了我你不行的", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "伊妮德", comment: "評價：猴子請來的逗比", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "魯賓", comment: "評價：我勒個去", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "威弗列德", comment: "評價：這貨碉堡了", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "史帝文", comment: "評價：咖啡不加糖", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "哈瑞斯", comment: "評價：豬一樣的隊友", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "亞特伍德", comment: "評價：離了我你不行的", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "伊妮德", comment: "評價：猴子請來的逗比", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "魯賓", comment: "評價：我勒個去", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "威弗列德", comment: "評價：這貨碉堡了", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "史帝文", comment: "評價：咖啡不加糖", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "哈瑞斯", comment: "評價：豬一樣的隊友", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "亞特伍德", comment: "評價：離了我你不行的", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "伊妮德", comment: "評價：猴子請來的逗比", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "魯賓", comment: "評價：我勒個去", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "威弗列德", comment: "評價：這貨碉堡了", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "史帝文", comment: "評價：咖啡不加糖", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "哈瑞斯", comment: "評價：豬一樣的隊友", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "亞特伍德", comment: "評價：離了我你不行的", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "伊妮德", comment: "評價：猴子請來的逗比", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "魯賓", comment: "評價：我勒個去", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "威弗列德", comment: "評價：這貨碉堡了", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "史帝文", comment: "評價：咖啡不加糖", heart:"Scene_BaiQin_jpg" }
            , { icon: "Scene_BaiQin_jpg", friendName: "哈瑞斯", comment: "評價：豬一樣的隊友", heart:"Scene_BaiQin_jpg" }
        ];
        this.listFriends.dataProvider = new eui.ArrayCollection(dsListFriends);

        this.listFriends.itemRenderer = friendsList;
    }
    protected createChildren() {
    }
}

class friendsList extends eui.ItemRenderer {

    public selectBtn: eui.Button;

    constructor() {
        super();
        this.skinName = "friendsListIRSkin"; 
    }

    protected createChildren(): void {
        super.createChildren();
    }
    protected dataChanged(): void {
        this.selectBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            console.log("名字·····"+this.data.friendName);
            console.log("信息·····"+this.data.info);
        }, this);
    }
}

運行效果如下：

 需要demo的請點擊右側加群下載