使用Layer构建聊天系统界面-优快云博客

本文链接：https://blog.youkuaiyun.com/DOCALLEN/article/details/53547577

本文介绍了使用Layer UI库创建聊天应用中添加好友、查找好友及发送请求界面的过程。作者详细解析了如何调整默认样式、避免滚动条出现及在Layer内添加元素等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是第一周的最后一天，最近的项目中一个类似QQ聊天系统为最重要的任务，师傅交给我的任务是用layer完成三个界面，添加好友界面、查找好友界面以及发送好友添加请求界面。
先说明一下layer的基本页面模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送好友请求</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .layui-layer{
            overflow: none!important;
        }
        .layui-layer-content{
            padding-top: 26px!important;
            padding-right: 20px!important;
            padding-bottom: 20px!important;
            padding-left: 46px!important;
            height: 133px!important;
        }
    </style>
</head>
<body>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="lib/layer/layer.js"></script>
    <script>
        layer.open({
            type: 2,
            title: '添加好友',
            area: ['455px','208px'],
            fixed: false,//不固定
            maxmin: true,
            shade: 0,
            icon: 2,
            btn: '确认',
            scrollbar: false,
            skin: 'layui-layer-lan',
            content: 'index.html'
        });
    </script>
</body>
</html>

如果只使用layer中的组件，就直接引用一个layer.js即可。同样也可以修改layer自带的样式，可以在样式后面加上！important这样权值就能高过默认样式。

讲讲在写三个页面时遇到的问题吧：
这里写图片描述
比如这个弹出界面，利用的是layer.opm({type:2});代码就是上面的。如果使用layer自带的样式，那么只要在同级中写一个index.html,再在content中引入这个html页面，就能自动生成响应的页面。但是这边得重新修改他的默认样式，写下来会发现，最好在自己写的样式后面都添加上！important，这样能确保自己写的样式能够生效。
还有一点要注意的layui-layer-content的高度和自己写的页面的框的高度的比较，不然容易产生滚动条，这是我们不愿意看到的。
最后一点我也有疑惑的，自己无法在layer中添加节点，也就是说无法添加元素？

实习第五天