Question

我试图创建这个可以向下滚动的移动网站，它会“显示”更多信息块。

我的代码目前是这样的：

的index.php

<?php
include_once('yhteys.php');
require 'config.php';
?>


<!DOCTYPE html>
<head>
</head>
<body>
<?php

    foreach($uusiYhteys->query('SELECT otsikko, kuva, id_ryhma, id_ilmoitus, popup FROM ilmoitukset WHERE id_ryhma = 16 ORDER BY aika DESC LIMIT 0,5') as $info)
    {
        echo '<section class="rss-container">';
        echo '<p class="rss-title-small">
        <img class="rss-image-small" src="http://example.com'.$info['kuva'].'&wmax=100&hmax=100" />
        <a href="http://example.com?ryhma='.$info['id_ryhma'].'&uutinen='.$info['id_ilmoitus'].'" title="'.$info['otsikko'].'">'.$info['otsikko'].'</a></p>';    
        echo '<p class="rss-desc">'.$info['popup'].'</p>';
        echo '</section>';
        echo '<br />';
    }

    ?>

Yhteys.php 有这个：

$uusiYhteys = new PDO('mysql:host=000.000.00.00;dbname=example_table;charset=utf8', 'dbuser', 'dbpass') or die("You failed, go away.");

现在它只显示前5个帖子，当我向下滚动时，我希望它再显示5个帖子。任何指导？谢谢。

Answer 1

使用Ajax调用db函数，在查询中使用SELECT ... LIMIT 5 OFFSER $currentOffset + 5，将其作为FETCH::ASSOC获取并返回为json字符串（json_encode($resultsArray);）。在Ajax SUCCESS函数中，只复制.rss-container的现有（假设为第一个）块，并用Ajax调用中的值替换旧值。

Answer 2

您需要在网站的前端使用一些javascript粘合剂才能实现此功能。

此代码（使用jQuery）将在div的底部插入一个名为＆＃34; status＆＃34;的新段落项。状态div是我们存储所有项目的地方。

$(document).ready(function() {
doMouseWheel = 1;
$(".statuses").after("<p id='last'></p>");

$(window).scroll(function() {
    if (!doMouseWheel)
        return;

    var distanceTop = $('#last').offset().top - $(window).height();
    if ($(window).scrollTop() > distanceTop) {
        $('#loading').show();
        doMouseWheel = 0;

        ajaxLoad();
    }
});
})

当页面向下滚动足够远时，将调用

ajaxLoad（）。

function ajaxLoad() {

if (last_id == 0) {
    $('#loading').hide();
    doMouseWheel = 0;
    return;
}
u = "/load-requests/";
if (last_id > 0)
    u = u + "?last_id=" + last_id;
$.ajax({
    dataType: "json",
    url: u,
    success: function(j) {
        last_id = j.last_id;
        for (n = 0; n < j.statuses.length; ++n) {
            _line = _newLine(j.statuses[n]]);
            $('ul.statuses').append(_line);
        }
        $('.hide-load').hide();
        $('#loading .message').html('Fetching more items for the timeline');
        $('#loading').slideUp();
        doMouseWheel = 1;
    }
})

}

/load-requests/网址将输出类似于此的JSON：

{
    "statuses": [{
            "who": 1,
            "for": "company",
            "name": "ABC Computing",
            "id": 2,
            "status": "added a new article",
            "timez": "2008-07-17T09:24:17Z",
            "timep": "2 days ago",
            "additional": [{
                "for": "document",
                "name": "Article Name",
                "value": "What is the purpose of using infinite scroll timelines to show information",
                "id": 42
            }, {
                "name": "New Topics",
                "value": "information, javascript, javascript, development"
            }]
        },
        last_id = 3
    }
}

当请求页面时，它将设置last_id，这是最后一次看到的项目。

_newLine将行内容呈现为添加到<li>＆gt;的<ul项。

我使用以下HTML：

<ul class="statuses">

</ul>

<div class="screen" id="loading">
    <div class="hide-load">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    <img src="/articles/images/homepage.gif">
    <h1>Please wait...</h1>
    <span class="message">Generating your personalised timeline...</span>
</div>

<div class="screen" id="error">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="simplemessage error">
        <img src="/articles/images/error.png" style="vertical-align: middle;">
        <strong>There were issues attempting to load some or all of your feed.</strong><br />
        Sadly, not everything could be loaded. Sorry about that!
    </div>
</div>

查看此jQuery插件：http://www.infinite-scroll.com/

提供的代码基于http://www.jquery4u.com/demos/infinite-scrolling-demo5/

滚动页面时从数据库加载更多数据

2 个答案: