要在Meteorjs中实现无限滚动，请首先显示最新数据 [英] To achieve Infinite Scroll in Meteorjs, showing latest data first
问题描述
我已按照此处的字母顺序进行操作: http://www.meteorpedia.com /read/Infinite_Scrolling ，其结果符合教程作者的预期，即，无限滚动从顶部到底部显示了集合中的第一个数据(旧)到最后一个(最新)数据.
问题是:我要实现无限滚动的位置在新闻提要中，就像在Facebook中找到的那样，它首先显示了集合中的最新(最新)数据，当您向下滚动时，较旧的数据将被添加.
我尝试使用createdAt:-1对数据进行反向排序，但是发生了一件有趣的事情:
刷新后，新闻订阅源将显示前3个旧数据(因为我限制为3个)，然后向下滚动时，处将附加另外3个数据集(较新而不是最新的) TOP (旧数据的顶部)，此模式将一直持续到屏幕上的数据完全加载为止.我想要实现的功能类似于Facebook的Newfeed，即新闻提要在顶部显示最新/最新数据，并且随着用户向下滚动，将调用较旧的数据并将其添加到客户端.代码如下:
statusBox.html(客户端)
<template name="statusBox">
{{#each newsfeedList}}
..HTML template goes here..
{{/each}}
{{#if moreResults}}
<div id="showMoreResults" class="text-center" style="margin-left: 25px;">
<span class="loading"><i class="fa fa-spinner fa-pulse" aria-hidden="true"></i></span>
</div>
{{/if}}
</template>
publish.js(服务器)
Meteor.publish('status', function(limit){
return Status.find({}, {limit:limit});
});
statusBox.js(客户端)
newsfeed_increment = 3;
Session.setDefault('newsfeedLimit', newsfeed_increment);
Deps.autorun(function(){
Meteor.subscribe('status', Session.get('newsfeedLimit'));
});
Template.statusBox.helpers({
//Merging few collections into one template helper: https://stackoverflow.com/questions/21296712/merging-collections-in-meteor
newsfeedList: function(){
return Status.find({},{sort:{createdAt:-1}});
},
...
//Reference for infinitescrolling: http://www.meteorpedia.com/read/Infinite_Scrolling
moreResults: function() {
// If, once the subscription is ready, we have less rows than we
// asked for, we've got all the rows in the collection.
return !(Status.find().count() < Session.get("newsfeedLimit"));
}
});
// whenever #showMoreResults becomes visible, retrieve more results
function showMoreVisible() {
var threshold, target = $("#showMoreResults");
if (!target.length) return;
threshold = $(window).scrollTop() + $(window).height() - target.height();
if (target.offset().top < threshold) {
if (!target.data("visible")) {
// console.log("target became visible (inside viewable area)");
target.data("visible", true);
Session.set("newsfeedLimit",
Session.get("newsfeedLimit") + newsfeed_increment);
}
} else {
if (target.data("visible")) {
// console.log("target became invisible (below viewable arae)");
target.data("visible", false);
}
}
}
// run the above func every time the user scrolls
$(window).scroll(showMoreVisible);
结果: 滚动前
结果: 滚动后
( 输入的状态"依次为1,2,3,4,5,6.请注意，在第1,2,3框的顶部添加了第4、5、6框图片 )
您需要在发布函数上对结果进行排序
publish.js(服务器)
Meteor.publish('status', function(limit){
return Status.find({}, {limit:limit, sort: {createdAt: -1}});
});
I've followed the tutorial here, to the letter: http://www.meteorpedia.com/read/Infinite_Scrolling and the result is as intended by the author of the tutorial, i.e. that the infinite scrolling shows the first data (old) in the collection to the last (latest), from top to bottom.
The problem is: The place where I want to implement the infinite scroll is in a newsfeed, much like the one found in Facebook, which shows the most recent (latest) data from the collection first, and when you scroll down, the older data will be added.
I've tried to use createdAt:-1 to sort the data backwards, but a funny thing happened:
Upon refresh, the newsfeed will show the first 3 old data (because I put 3 as the limit), and then when I scroll down, another 3 set of data (newer not latest) will be appended at the TOP of the old data, and this pattern continues until the data fully loaded on screen. What I want to achieve is similar to Facebook's Newfeed i.e. the newsfeed shows the latest/recent data at the top, and as the user scrolls down, older data gets called and added to the client. The code is as provided below:
statusBox.html(client)
<template name="statusBox">
{{#each newsfeedList}}
..HTML template goes here..
{{/each}}
{{#if moreResults}}
<div id="showMoreResults" class="text-center" style="margin-left: 25px;">
<span class="loading"><i class="fa fa-spinner fa-pulse" aria-hidden="true"></i></span>
</div>
{{/if}}
</template>
publish.js(server)
Meteor.publish('status', function(limit){
return Status.find({}, {limit:limit});
});
statusBox.js(client)
newsfeed_increment = 3;
Session.setDefault('newsfeedLimit', newsfeed_increment);
Deps.autorun(function(){
Meteor.subscribe('status', Session.get('newsfeedLimit'));
});
Template.statusBox.helpers({
//Merging few collections into one template helper: https://stackoverflow.com/questions/21296712/merging-collections-in-meteor
newsfeedList: function(){
return Status.find({},{sort:{createdAt:-1}});
},
...
//Reference for infinitescrolling: http://www.meteorpedia.com/read/Infinite_Scrolling
moreResults: function() {
// If, once the subscription is ready, we have less rows than we
// asked for, we've got all the rows in the collection.
return !(Status.find().count() < Session.get("newsfeedLimit"));
}
});
// whenever #showMoreResults becomes visible, retrieve more results
function showMoreVisible() {
var threshold, target = $("#showMoreResults");
if (!target.length) return;
threshold = $(window).scrollTop() + $(window).height() - target.height();
if (target.offset().top < threshold) {
if (!target.data("visible")) {
// console.log("target became visible (inside viewable area)");
target.data("visible", true);
Session.set("newsfeedLimit",
Session.get("newsfeedLimit") + newsfeed_increment);
}
} else {
if (target.data("visible")) {
// console.log("target became invisible (below viewable arae)");
target.data("visible", false);
}
}
}
// run the above func every time the user scrolls
$(window).scroll(showMoreVisible);
The result: before scroll
The result: after scroll
(The 'status' entered were 1,2,3,4,5,6 sequentially. Note the new addition of box 4, 5, 6, on top of box 1,2,3 off the picture)
You need to sort the results on your publish function
publish.js(server)
Meteor.publish('status', function(limit){
return Status.find({}, {limit:limit, sort: {createdAt: -1}});
});
这篇关于要在Meteorjs中实现无限滚动，请首先显示最新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
