聊天室自动滚动效果实现

简介:

1.聊天区域

<div id="chatlist">
</div>
AI 代码解读

2.css设置

#chatlist {
    position: fixed;
    width: 100%;
    bottom: 4rem;
    max-height: 200px;
    overflow-y: scroll;
}
AI 代码解读

3.监听消息并处理

function setOnReceiveMessageListener() {
    rong.setOnReceiveMessageListener(function (ret, err) {
        ret.result.message.content.extra = JSON.parse(ret.result.message.content.extra); // 字符串处理成json
        // 将消息展示到页面中
        var interText = doT.template($("#chat_row_tmpl").text());
        $("#chatlist").append(interText(ret.result.message.content));

        // 让消息自动滚动
        var chatlist = document.getElementById('chatlist');
        chatlist.scrollTop = chatlist.scrollHeight;
    })
}
AI 代码解读

dot消息模板

<script id="chat_row_tmpl" type="text/html/x-dot-template">
    <div class="aui-row">
        <div class="aui-col-xs-9 aui-padded-t-15 aui-padded-l-10">
            <div class="bj  aui-font-size-14 color_qianl aui-padded-l-10" style="padding:0.2rem 0.6rem;">
                <div class="aui-label aui-label-danger"></div>
                <span class="color_fen"> {{= it.extra.nickname}}:</span> {{= it.text}}
            </div>
        </div>
    </div>
</script>
AI 代码解读

ps:没用到什么插件,就是一些基本的js和css,就能够很好的实现效果!

核心就是这里,

// 让消息自动滚动
var chatlist = document.getElementById('chatlist');
chatlist.scrollTop = chatlist.scrollHeight;
AI 代码解读

数据通过dot,进行动态展示!

// 将消息展示到页面中
var interText = doT.template($("#chat_row_tmpl").text());
$("#chatlist").append(interText(ret.result.message.content));

本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/6633377.html,如需转载请自行联系原作者
AI 代码解读
目录
打赏
0
0
0
0
64
分享
相关文章
uniapp 实现加载效果,消息提示框,模态框
uniapp 实现加载效果,消息提示框,模态框
642 0
C#或Winform中的消息通知之系统托盘的气泡提示窗口(系统toast通知)、ToolTip控件和ToolTipText属性
NotifyIcon控件表示系统右下角任务栏上的托盘图标,其ShowBalloonTip方法用于显示气球状提示框(Win10只有为本地Toast通知),ToolTip\oolTipText可以...
2192 0
C#或Winform中的消息通知之系统托盘的气泡提示窗口(系统toast通知)、ToolTip控件和ToolTipText属性
iOS开发-聊天气泡的绘制和聊天消息列表
iOS开发-聊天气泡的绘制和聊天消息列表
275 0
iOS开发-聊天气泡的绘制和聊天消息列表
Windows程序设计——窗口键盘消息滚动事件
Windows程序设计——窗口键盘消息滚动事件
296 0
C# WPF QQ新消息托盘悬浮窗效果实现
原文:C# WPF QQ新消息托盘悬浮窗效果实现 今天在做一个项目的时候需要这么一个效果,但是网上找了一会发现并没有现成的给我参考(复制),但是呢,我千(到)辛(处)万(抄)苦(袭)想(复)破(制)头(粘)脑(贴)终于还是给做出来了~嘿嘿嘿 QQ新消息悬浮窗即:QQ有新消息时托盘图标会闪动,此时移动鼠标到托盘图标上就会显示一个弹框了,那么呢我把这个弹框称为“QQ新消息托盘悬浮窗”。
2653 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等