微信小程序 仿QQ用户列表

微信小程序 仿QQ用户列表

效果图如下:

微信小程序 仿QQ用户列表_第1张图片
微信小程序 仿QQ用户列表_第2张图片
微信小程序 仿QQ用户列表_第3张图片
微信小程序 仿QQ用户列表_第4张图片

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;
}

你可能感兴趣的:(Mini,Program)