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的请点击右侧加群下载