美文网首页
开发私信对话遇到的问题

开发私信对话遇到的问题

作者: 心若彩虹_a484 | 来源:发表于2020-03-17 17:29 被阅读0次
    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;

    相关文章

      网友评论

          本文标题:开发私信对话遇到的问题

          本文链接:https://www.haomeiwen.com/subject/jbityhtx.html