zoukankan      html  css  js  c++  java
  • 聊天室自动滚动效果实现

    1.聊天区域

    <div id="chatlist">
    </div>
    

    2.css设置

    #chatlist {
        position: fixed;
         100%;
        bottom: 4rem;
        max-height: 200px;
        overflow-y: scroll;
    }
    

    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;
        })
    }
    

    dot消息模板

    <script id="chat_row_tmpl" type="text/html/x-dot-template">
        <div class="aui-row">
            <div class="aui-col-xs-9 aui-padded-t-15 aui-padded-l-10">
                <div class="bj  aui-font-size-14 color_qianl aui-padded-l-10" style="padding:0.2rem 0.6rem;">
                    <div class="aui-label aui-label-danger"></div>
                    <span class="color_fen"> {{= it.extra.nickname}}:</span> {{= it.text}}
                </div>
            </div>
        </div>
    </script>
    

    ps:没用到什么插件,就是一些基本的js和css,就能够很好的实现效果!

    核心就是这里,

    // 让消息自动滚动
    var chatlist = document.getElementById('chatlist');
    chatlist.scrollTop = chatlist.scrollHeight;
    

    数据通过dot,进行动态展示!

    // 将消息展示到页面中
    var interText = doT.template($("#chat_row_tmpl").text());
    $("#chatlist").append(interText(ret.result.message.content));
    
  • 相关阅读:
    用js实现 全选功能(Gridview)
    图片 加文字水印或者图片水印
    Gridview中RowCommand事件的应用
    图片噪点的产生
    DataList实现折叠效果
    利用Request对象的CurrentExecutionFilePath做分页
    利用分页控件AspNetPager来做数据的分页
    log4Net一些记忆性总结
    彩色验证码
    组织机构设计器窗体基类 代码分析
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/6633377.html
Copyright © 2011-2022 走看看