layim查看聊天记录，layim开发者文档已经写得很详细，在这里只是粗略说说聊天记录页面。
先呈上效果图压压惊
附上源码，源码下载
1.绑定聊天记录
首先绑定聊天记录，本例子简单介绍本地数据绑定，实际应用请分页获取聊天记录。
/** html代码 */
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
<!--if(item.fromid == parent.layui.layim.cache().mine.id){
-->
{
{
# layui.each(d.data, function(index, item){
if(item.fromid == 1){
}} // 实际应用中这里的1改为登录用户的编号
<li class="layim-chat-mine"><div class="layim-chat-user"><img src="{
{ item.avatar }}"><cite><i>{
{
layui.data.date(item.timestamp) }}</i>{
{
item.username }}</cite></div><div class="layim-chat-text">{
{
layui.layim.content(item.content) }}</div></li>
{
{
# } else {
}}
<li><div class="layim-chat-user"><img src="{
{ item.avatar }}"><cite>{
{
item.username }}<i>{
{
layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{
{
layui.layim.content(item.content) }}</div></li>
{
{
# }
}); }}
</textarea>
/** js代码 */
function bindingMessage(){
var logJson = {
"code": 0,
"count": null,
"data": [
{
"avatar": "http://tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg",
"cid": 1,
"content": "hello",
"fromid": 1,
"id": 1,
"mine": true,
"timestamp": 1587115464318,
"type": "friend",
"username": "小升"
}
]
"keyId": null,
"msg": "操作成功！"
};
// 数据转化为html格式
var html = laytpl(LAY_tpl.value).render({
data: msg.data
});
// 插入元素内部的第一个子节点之前
var layView = document.getElementById('LAY_view');
layView.insertAdjacentHTML('afterbegin', html);
}
2.监听鼠标滑动事件
当滚动条滚动到页面最顶端时，自动加载下一页聊天记录。
// 滚轮滚动方向(大于0向上，小于0向下)
var scrollDelta = 0;
/**
* 鼠标滑动事件
*/
$(window).scroll(function() {
var hh = $(window).scrollTop();
// 向上滑动并且滑到顶端时加载下一页聊天记录
if(scrollDelta > 0 && hh == 0){
bindingMessage();
}
});
/**
* 判断鼠标滚轮滚动方向
*/
if (window.addEventListener)// FF,火狐浏览器会识别该方法
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;//W3C
// 统一处理滚轮滚动事件
function wheel(event){
if (!event) event = window.event;
if (event.wheelDelta) {
// IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
scrollDelta = event.wheelDelta/120;
if (window.opera) scrollDelta = -scrollDelta;// 因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
} else if (event.detail) {
// FF浏览器使用的是detail,其值为“正负3”
scrollDelta = -event.detail/3;
}
}
3.个性设置滚动条位置
聊天记录加载完毕之后，滚动条默认在最顶端，对阅读者极不友好。因此咱们需要把滚动条定位到原来阅读的位置。
//定义全局变量 当前div总高度(currentHeight )，加载新记录前的总高度(beforeHeight )
var currentHeight = 0, beforeHeight = 0;
// 获取整个聊天框的总高度
var layView = document.getElementById('LAY_view');
var currentHeight = layView.clientHeight;
// 设置当前滚动条的高度
window.scrollTo(0, currentHeight-beforeHeight);
// 记录本次高度
beforeHeight = currentHeight;
赠人玫瑰手留余香，若对您有帮助，来
点个赞呗！