本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长

+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

如何实现滚动时自动加载更多数据的功能?

发布于2024-10-31 12:31     阅读(1038)     评论(0)     点赞(28)     收藏(0)


我已经在这个问题上纠结了两天了。我正在显示一个主题列表。一切都运行正常,但每当我滚动到页面底部时,我都想向列表中添加更多数据,就像在流行的社交媒体网站上一样。

这是我的 get-topic.php

<?php
include_once 'resources/Wall.php';
$Wall   = new Wall;
global $databaseConnection;
$username_get = mysqli_query($databaseConnection, "SELECT * from tableTopics order by columnTopicId desc limit ".$topicsPerPage."");
$numberRows = mysqli_num_rows($username_get);/* get the total number of rows and put it in a variable */
$loopCount = 1;
$html .= '  <div class="topics-box">';
while ($name = mysqli_fetch_array($username_get)) {/* loop through the topics */
    $topicId = $name['columnTopicId'];
    $topicTitle = $name['columnTopicTitle'];
    $getPic = $Wall->getTopicPicture($topicId);
    $html .= '  <div class="topic-header">
                    <img class="topic-picture" src="'.$getPic.'">
                    <a class="topic-title">'.$topicTitle.'</a>
                    <a class="topic-action-button"><div class="icon-more topic-action-button-icon"></div></a><a class="topic-follow-button"><div class="icon-footprints topic-follow-button-icon"></div>Follow</a>
                </div>
                <div class="topic-stats">
                    <div class="topic-right-stat">54k Followers</div>
                </div>';
    if ($loopCount < $numberRows) {
        $html .= '<div class="topics-border"></div>';
    }
    $loopCount ++;/* add 1 to the loop count everytime */
}
$html .= '  </div>';
echo $html;
?>

这是我的 js 函数

function loadMoreTopics() {
    alert("hi");
}

每当用户使用此代码滚动到页面底部时,我都会调用该函数。

        jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {
               loadMoreTopics();
            }
        });

我尝试使用几个 Ajax 示例,但都不起作用。我应该使用哪个 Ajax 函数?请帮忙。


解决方案


看一下jQuery Scrollbox 插件。您可以使用它轻松实现所需的功能。只需在 html 中定义容器并使用以下代码:

var $container = $('#content-container');

$container
    .on('reachbottom.scrollbox', function () {
        $.ajax({
            // options like url, dataType etc.
        }).done(function (response) {
            $container
                .append(response)
                .scrollbox('update');
        });
    })
    .scrollbox({
        distanceToReach: {
            y: 100
        }
    });


所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.phpheidong.com/blog/article/552764/3b4c10ad1f0e6b52f999/

来源:php黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

28 0
收藏该文
已收藏

评论内容:(最多支持255个字符)