javascript - 像 Facebook 聊天系统一样向上滚动加载数据

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 9 年前。

社区 10 个月前审核了是否重新开放此问题，并将其关闭:

原始关闭原因未解决

Improve this 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 并显示它