微信小程序 仿QQ用户列表

微信小程序 仿QQ用户列表

效果图如下：

WXML文件代码如下：

 

   

     

       

     

     

       

     

   

   

      {{groups.name}}

   

   

      ({{groups.count}})

   

 

 

   

     

       

         

          {{friends.name}}

       

     

   

 

JS文件代码如下：

Page({

    data: {

        friends: [{

            id: 1,

            name: "张三三",

            photo: "/../image/timg (6).jpeg",

            group: 1

        }, {

            id: 2,

            name: "李四四",

            photo: "/../image/timg (2).jpeg",

            group: 1

        }, {

            id: 3,

            name: "王五五",

            photo: "/../image/timg (3).jpeg",

            group: 2

        }, {

            id: 4,

            name: "赵六六",

            photo: "/../image/timg (4).jpeg",

            group: 3

        }, {

            id: 5,

            name: "孙七七",

            photo: "/../image/timg (5).jpeg",

            group: 3

        }, {

            id: 6,

            name: "钱八八",

            photo: "/../image/timg (6).jpeg",

            group: 3

        }

        ],

        groups: [{

            id: 1,

            name: "我的好友",

            hidden: true,

            count: 2

        }, {

            id: 2,

            name: "我的朋友",

            hidden: true,

            count: 1

        }, {

            id: 3,

            name: "我的好友的好友",

            hidden: true,

            count: 3

        }],

        expanded: false,

    },

    groupclick: function (e) {

        var id = e.currentTarget.id, groups = this.data.groups;

        for (var i = 0, len = groups.length; i < len; ++i) {

            if (groups[i].id == id) {

                groups[i].hidden = !groups[i].hidden;

            }

        }

        this.setData({

            groups: groups

        });

    }

})

WXSS文件代码如下：

.list-text {

  font-size: 16px;

  margin-left: 5px;

}

.list-view-groups {

  display: flex;

  height: 40px;

  flex-direction: row;

  align-items: center;

  justify-content: left;

  border-bottom: 1px solid lightgray;

}

.list-image {

  margin-left: 5px;

  width: 24px;

  height: 24px;

}

.list-view-count {

  width: 10%;

}

.list-view-image {

  width: 10%;

}

.list-view-text {

  width: 80%;

}

.list-view-friend {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: left;

  border-bottom: 1px solid lightgray;

}

.list-friend-image {

  width: 45px;

  height: 45px;

  margin: 3px;

  margin-left: 10px;

  border-radius: 50%;

}

.list-friend-text {

  font-size: 16px;

  margin-left: 5px;

}

.list-view-friend:hover {

  border-left: 3px solid lightgreen;

  border-right: 3px solid lightcoral;

}