我正在开发一个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个;无论如何,我正在寻找一种方式,我怎么说当用户到达页面底部时它会加载更多帖子;我必须通过客户端这样做吗?或者我可以通过某种方式通过服务器端执行此操作吗?告诉我是否需要更深入地解释我的问题。
答案 0 :(得分:0)
您正在寻找的是“无限滚动”,当您的用户到达已呈现的页面底部时,您基本上想要执行另一个请求。
这将要求您在浏览器滚动到达页面底部时触发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%的方式。希望这可以帮助!