layim之查看更多聊天记录

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;

赠人玫瑰手留余香，若对您有帮助，来 点个赞呗！