Question

我正在开发一个聊天系统，我需要在Facebook聊天系统等滚动功能上显示聊天记录。

任何人都可以帮助我吗？

Answer 1

它会是这样的......

HTML

<div id="chatBox">
     <div class='inner'>
     <?php foreach($messages as $m){;?>
       <div class='message'><?php echo $m;?></div>
    <?php ;};?>
     </div>
</div>

JQUERY

$(document).ready(function(){           
$("#chatBox").scrollTop($("#chatBox")[0].scrollHeight);

$('#chatBox').scroll(function(){
    if ($('#chatBox').scrollTop() == 0){

        // Do Ajax call to get more messages and prepend them
        // To the inner div
        // How you paginate them will be the tricky part though
        // You'll likely have to send the ID of the last message, to retrieve 5-10 'before' that 

        $.ajax({
        url:'getmessages.php',
        data: {idoflastmessage:id}, // This line shows sending the data.  How you get it is up to you
        dataType:'html',
        success:function(data){
            $('.inner').prepend(data);
            $('#chatBox').scrollTop(30); // Scroll alittle way down, to allow user to scroll more
        };
        });
    }
});

});

EXAMPLE HERE

// GENERATE FIRST BATCH OF MESSAGES
//This will be where you do your SQL and PHP first
for(var i=0;i<20;i++){
    $('.inner').prepend('<div class="messages">First Batch messages<br/><span class="date">'+Date()+'</span> </div>');}


$("#chatBox").scrollTop($("#chatBox")[0].scrollHeight);

// Assign scroll function to chatBox DIV
$('#chatBox').scroll(function(){
    if ($('#chatBox').scrollTop() == 0){
        // Display AJAX loader animation
         $('#loader').show();
  
      // Youd do Something like this here
      // Query the server and paginate results
      // Then prepend
      /*  $.ajax({
            url:'getmessages.php',
            dataType:'html',
            success:function(data){
                $('.inner').prepend(data);
            };
        });*/
        //BUT FOR EXAMPLE PURPOSES......
        // We'll just simulate generation on server

       
        //Simulate server delay;
        setTimeout(function(){
        // Simulate retrieving 4 messages
        for(var i=0;i<4;i++){
        $('.inner').prepend('<div class="messages">Newly Loaded messages<br/><span class="date">'+Date()+'</span> </div>');
            }
            // Hide loader on success
            $('#loader').hide();
            // Reset scroll
            $('#chatBox').scrollTop(30);
        },780); 
    }
});

body {font-family:Arial;}
#chatBox {width:300px;height:400px;border: 1px solid;overflow:scroll}
#loader {display:none;}
.messages {min-height:40px;border-bottom:1px solid #1f1f1f;}
.date {font-size:9px;color:#1f1f1f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatBox">
<!--Loading ANIMATION-->
<img id="loader" src='http://opengraphicdesign.com/wp-content/uploads/2009/01/loader64.gif'>
<!--END LOADING ANIMATION-->
    
    <div class='inner'>
        <!-- WHERE YOU WILL LOAD CONTENT-->
    </div>
</div>

这个例子只显示了一个快速和脏的滚动，前置。没有ajax电话或任何东西。但是你明白了

它可能会比我上面发布的内容稍微复杂一些......以避免双重数据等等

此外，您需要向服务器发送最后一篇文章的ID或各种分页数据，以便知道接下来要检索的内容。你如何做到这一点是你的选择。

但基本上你会查询服务器，并解除接下来的10个帖子，并在foreach循环中回显它们，然后获取该html并显示它

像facebook聊天系统一样向上滚动加载数据

1 个答案: