前段时间整理刷新好友列表的时候遇到些小问题，现在与大家一起分享。
一. 添加右键菜单
绑定入口，添加右键菜单（如图），前几天已经整理，专机带你一程✈layim整合右键菜单
二. 清空数据缓存
一开始做刷新好友列表的时候，我并没处理好友分组数据，后期做移动好友才发现，选择分组的时候，我的分组时而正常显示，时而重复出现，后来经过排除，才发现刷新了好友时才会出现重复，原来做刷新好友列表的时候没有清空好友分组数据缓存导致的。
// 清空好友分组数据缓存
layim.cache().friend = [];
你没有看错，就是一句简单的代码。
三. 往主面板添加分组
绑定分组之前，先清空聊天主面板的好友分组信息
// 清空聊天主面板的好友分组信息
$(".layim-list-friend").empty();
接下来开始往主面板添加分组
// 从数据库查找出所有群聊，依次遍历添加
var imGroup = {
"id": 1,
"groupname": "我的好友"
};
// 往主面板添加分组
addFriendGroup(imGroup);
// 更新缓存
var cacheFriend = layim.cache().friend;
cacheFriend.push(imGroup);
layim.cache().friend = cacheFriend;
// 往主面板添加分组
var addFriendGroup = function (friendGroup) {
// 下面是自己手动把分组添加到列表中
var friendList_ul = document.getElementsByClassName("layim-list-friend")[0];
var li = document.createElement("li");
friendList_ul.appendChild(li);
var h5 = document.createElement("h5");
li.appendChild(h5);
h5.setAttribute("layim-event", "spread");
h5.setAttribute("lay-type", "false");
h5.setAttribute("groupid", friendGroup.id);
var i = document.createElement("i");
h5.appendChild(i);
i.setAttribute("class", "layui-icon");
i.innerText = ' ';
var span = document.createElement("span");
h5.appendChild(span);
span.innerText = friendGroup.groupname;
var em = document.createElement("em");
h5.appendChild(em);
var span1 = document.createElement("span");
em.appendChild(span1);
span1.innerText = '(';
var cite = document.createElement("cite");
em.appendChild(cite);
cite.setAttribute("class", "layim-count");
cite.innerText = ' 0';
var span2 = document.createElement("span");
em.appendChild(span2);
span2.innerText = ')';
var ul = document.createElement("ul");
li.appendChild(ul);
ul.setAttribute("class", "layui-layim-list");
var li2 = document.createElement("li");
ul.appendChild(li2);
li2.setAttribute("class", "layim-null");
li2.innerText = '该分组下暂无好友';
};
四. 往主面板添加好友
// 从数据库查找出所有好友，依次遍历添加
var imUser = {
"id": "1",
"username": "小焕",
"group": "1",
"sign": "这些都是测试数据，实际使用请严格按照该格式返回",
"status": "offline",
"avatar": "//wx2.sinaimg.cn/mw690/5db11ff4gy1flxmew7edlj203d03wt8n.jpg"
};
// 移除缓存中好友信息
layim.removeList({
type: "friend",
id: imUser.id
});
// 重新添加好友到主面板
layim.addList({
type: 'friend',
id: imUser.id,
username: imUser.username,
avatar: imUser.avatar,
groupid: imUser.group,
sign: imUser.sign,
status: imUser.status
});
大功告成！
五. 总结
刷新群聊列表也是一样的道理。对于一个后端工程师，小生尝试了几次，直接循环群组数据cacheGroup进行removeList操作，中间总有一个两个群组无法移除，若你有更好的办法，或者文章和代码有表述不当之处，还请不吝赐教。
// 清空群组数据缓存
var cacheGroup = layim.cache().group;
var arr = [];
$.each(cacheGroup, function (i, item) {
arr.push(item.id);
});
// 移除所有的群组
for(j = 0,len=arr.length; j < len; j++) {
layim.removeList({
type: "group", id: arr[j] });
}
// 重新添加群组到主面板
layim.addList({
type: 'group',
id: 1,
groupname: '热血三角裤',
avatar: '//wx2.sinaimg.cn/mw690/5db11ff4gy1flxmew7edlj203d03wt8n.jpg'
});
赠人玫瑰手留余香，若对您有所帮助，来
点个赞呗！