1.前端实现消息对话实时更新
当时这个问题是这么解决的,每两秒请求更新一次数据,每次更新数据增加10条请求的条数size,
将后10条新的数据插入到上一次接收到的列表数据中,并在updated周期钩子中将消息位置定位到底部,当页面离开时在beforeDestroy清除定时器。
image.png
2.局部更新消息数据
因为是医患对话包含订单电话等,私信的消息种类有很多,大致分为:系统消息,时间消息,文字消息,图片消息,订单消息,完成状态消息,电话拨打消息,取消消息等,底部还有很多工具栏。如果我在工具栏或者消息栏去拨打或者确定一个订单,怎么做到不刷新列表的情况下更新数据呢?
在消息列表中操作一条信息很简单触发事件绑定上index然后改变这条数据就行了,但是在工具栏拿不到index,这个时候怎么办呢。。这个时候显然index已经行不通了,这时需要去查最新一条数据把最新数据的id拿到然后去实现相关操作业务。
3.编写输入框自动滚动
编写输入框的时候需要实现输入4行内编辑框高度自动往下滚动,4行后固定高度,并友好展示4行,这个问题不是很好处理,当时是写了一个简单编辑器,首先需要固定编辑框最大高度并设置内容超出自动滚动,监听输入内容的高度,当scrollHeight小于某个值时获取滚动高度,将编辑框高度替换成滚动高度scrollHeight。
$.each($(".autoEdit"), function(i, n){
if(val==""){
$(n).css("height", 36 + "px");
}else{
console.log(n.scrollHeight);
if(n.scrollHeight<= 90){
$(n).css("height", n.scrollHeight + "px");
}
}
});
#######还有一个问题是私信列表数据很多的时候,安卓屏幕上滚动的不是很顺畅。加入样式滚动回弹-webkit-overflow-scrolling:touch;
网友评论