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">{{= it.extra.nickname}}{{= it.text}}</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 代码解读