Question

我正在开发一个food sub reddit的私有应用程序，我正在检索一些图像，每个视图限制20个图像，当用户到达页面底部时，它会加载更多信息并附加它，如ajax ;我正在使用请求服务器端并使用Snoocore，它是Reddit的API包装器。 Snoocore实际上提供了一种获取下一页信息的方法。来自Snoocore的文档：

// Instead of an HTTP verb, use a Snoocore helper `.listing`
// It will return a "slice" for a listing that has various 
// helpers attached to it.
reddit('/r/askreddit/hot').listing().then(function(slice) {

  // This is the front page of /r/askreddit
  // `slice.children` contains the contents of the page.
  console.log(slice.children);

  // Get a promise for the next slice in this 
  // listing (the next page!)
  return slice.next();

}).then(function(slice) {

  // This is the second page of /r/askreddit
  console.log(slice.children);

});

这是我的代码：

    reddit('/r/food/hot').listing({limit: 10}).then(result => {
        for (var x in result.children){
            if (result.children[x].data.link_flair_text === '[Homemade]' || result.children[x].data.link_flair_text === '[homemade]') {
                if (result.children[x].data.domain !== 'imgur.com') {

                    if (result.children[x].data.post_hint !== "rich:video") {

                        titles.push({
                            'title': he.decode(result.children[x].data.title),
                            'imgurl': he.decode(result.children[x].data.url),
                            'user': result.children[x].data.author,
                            'submission': result.children[x].data.permalink
                        });

                    }

                }
            }
        }
        console.log(result.children[4].data);

        res.render('index', {
            'titleArr': titles
        });

    });

在我的Pug模板上我有：

extends layout

block content
    div#wrap
        each i in titleArr
            figure.figure
                img.img-fluid.img-rounded(src= i.imgurl) 

                figcaption.figure-caption.text-center
                    p.text-muted #[i #{i.title}]
                    p 
                        | #[i ―by ] 
                        a(href="http://reddit.com" + i.submission, target="_blank")
                            | #[i /u/#{i.user}]

listing({limit: 10})这里很重要，因为它限制了检索的帖子;实际上我只检索了10个，默认情况下检索25个;无论如何，我正在寻找一种方式，我怎么说当用户到达页面底部时它会加载更多帖子;我必须通过客户端这样做吗？或者我可以通过某种方式通过服务器端执行此操作吗？告诉我是否需要更深入地解释我的问题。

Answer 1

您正在寻找的是“无限滚动”，当您的用户到达已呈现的页面底部时，您基本上想要执行另一个请求。

这将要求您在浏览器滚动到达页面底部时触发ajax请求。如果您使用jQuery，您的代码将如下所示：

nanosleep() required for timing operations.

每当用户到达页面底部时，这将触发ajax请求，并正确分页。不过，这只是浏览器方面。

您还需要稍微编辑服务器端点。

例如，您需要动态增加限额

    $(document).ready(function() {
    var win = $(window);


    var parts = location.pathname.split("/");

    // assuming a url like domain.com/reddit/10 where 10
    // is the total number of posts you're showing 
    var pageNumber = parts[3]; //this gives you access to the `10`

    // then add 10 to the current page number and 
    pageNumber += 10

    // use that for your ajax request 
    var url = "http://domain.com/reddit/"+pageNumber; 

    // Each time the user scrolls
    win.scroll(function() {
        // End of the document reached?
        if ($(document).height() - win.height() == win.scrollTop()) {
            $('#loading').show();

            $.ajax({
                url: url,
                dataType: 'json',
                success: function(json) {
                    // do something with your json of your posts
                    // then hide the loading gif or image.
                    $('#loading').hide();
                }
            });
        }
    });
});

访问//you could use the req.params method from express to accomplish this reddit('/r/food/hot').listing({limit: req.params.limit}).then(result => { for (var x in result.children){ if (result.children[x].data.link_flair_text === '[Homemade]' || result.children[x].data.link_flair_text === '[homemade]') { if (result.children[x].data.domain !== 'imgur.com') { if (result.children[x].data.post_hint !== "rich:video") { titles.push({ 'title': he.decode(result.children[x].data.title), 'imgurl': he.decode(result.children[x].data.url), 'user': result.children[x].data.author, 'submission': result.children[x].data.permalink }); } } } } console.log(result.children[4].data); res.render('index', { 'titleArr': titles }); });变量应该有效。您还需要编辑端点定义。我不确定你现在如何使用服务器的路由设置，但这是你可以做到的一种方式：

req.params.limit

这里的想法是你希望增加每个jQuery请求获取的项目数。这是一个非常快速和肮脏的方式，我正在做一些关于你如何处理服务器和你正在使用的假设，但这应该让你90％的方式。希望这可以帮助！

Node / Express - 当用户使用Snoocore（Reddit API包装器）点击页面底部时，将信息附加到列表

1 个答案: