像facebook聊天系统一样向上滚动加载数据 [英] Load data on scroll up like facebook chatting system

问题描述

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

i am developing a chat system where i need to display chat history on scroll up function like Facebook chat system.

任何人都可以帮助我吗？

can anybody help me?

推荐答案

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

It'll go something like this...

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

});

这里的示例

// 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电话或任何东西。但是你明白了这个想法

This example just shows a quick and dirty scroll, with prepend. No ajax call or anything. But you get the idea

它可能会比我上面发布的更复杂......但要避免双重数据等等

It'll likely be a little more complex then what I posted above though....to avoid double data, etc

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

And also, you need to send the server the id of last post, or pagination data of sorts, so it know what to retrieve next. How you do that is your choice.

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

But basically youll query the server, and retieve the next 10 posts, and echo them in a foreach loop, then fetch that html, and display it

这篇关于像facebook聊天系统一样向上滚动加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！