我在我的页面上显示数据,当我单击 load more data
按钮时,它将在已显示的数据下方的同一页面上加载更多数据 . 我想转换此功能,以便在用户向下滚动页面时加载更多数据,而不是单击 load more data
. 这是我拥有的和我所尝试的 .
html view
<section id="rosterImages">
<section id="users">
<div id="nameImage">
<figure id="content" class="thumbnail">
<img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
<figcaption>
<a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a>
</figcaption>
</figure>
</div>
</section>
</section>
Javascript Scroll
$(window).scroll(function (e) {
if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) {
$('#users').append(Next());
}
});
Next method
Next = function () {
var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
$.views.Roster.ViewModel.CurrentPage(_page);
$.views.Roster.GetPage("/api/Roster", 9, _page);
};
如果我将它链接到一个按钮而不是滚动,则下一个方法有效 .
2 回答
如果您尝试在用户滚动到页面结束时加载数据,这没关系,
然后你可以尝试: -
[更新]我尝试了同样的
$(document).ready(function () {));
,它的功能就像魅力一样: -我试过的完整代码如下: -
我们只是实现了类似的东西,我们的方法几乎就像另一个答案,除了检查你是否真的到达了页面的末尾