使用 wordpress 和 jquery mobile 在底部滚动时加载更多内容

Question

我正在开发一个应用程序，使用cordova 作为构建应用程序的平台，并使用作为后端安装的 JSON API 插件的 wordpress。 我编写了这两个函数来从我的网站上抓取帖子，然后在 jquery mobile 和 cordova 完全加载时将其显示给用户。

// App Logic
function init()
{
	getData(1);
}
function getData(pageNumber) {
	$.getJSON('http://blabla.com/wordpress/?json=get_recent_posts&page='+pageNumber, function(data) {
		posts = data.posts;
		$.each(posts, function(index, post) {
			id = post.id;
			title = post.title;
			thumb = post.thumbnail;
			comments = post.comment_count;
			author  = post.author['name'];
			  $('#posts_list').append('<a href="post.html?id='+id+'" data-ajax="false"><div class="single-post">'
			  +'<div class="img"><img src="'+thumb+'" class="lazy" title="" /></div>'
			  +'<div class="info">'
			  +'<div class="title">'+title+'</div>'
			  +'<div class="stats"><span class="author">'+author+'</span> <span class="comments">'+comments+' comments</span></div>'
			  +'</div>'
			  +'</div></a>');
		});
				
	});
}

我希望当用户在底部页面滚动时，代码会加载页面 2 的更多内容，直到帖子完全加载。 PS：这是服务器端输出的示例（JSON）：

<!-- http://blabla.com/?json=get_recent_posts&page=1-->
{"status":"ok","count":10,"count_total":2039,"pages":204,"posts":[{.....}] }

Answer 1

您可以在每个滚动事件中检查从当前位置到页面或容器底部的距离，如果增量小于某个阈值，您可以添加更多项目。

var count = 0,
    loadThreshold = 50; //50px threshold used to define when it needs to load more items.

loadContent();

$( window ).scroll(function() {
  var windowHeight = $(window).height(),
      containerHeight = $(document).height(),
      contentCurrentTopPosition = $(document).scrollTop(),
      deltaDistanceToContentBottom = containerHeight - windowHeight - contentCurrentTopPosition;


    if (deltaDistanceToContentBottom < loadThreshold){
        loadContent();
    }

});


function loadContent(){
    var strContent = "",
        strTemplate = "<li>Item {0}</li>";
    for (var i=0;i<50;i++){
        strContent += strTemplate.replace('{0}',  count + i);
    }

    count += 50;
    $('.list').append(strContent);
}

（已编辑） http://jsfiddle.net/bg88q6yL/3/

请记住，在移动设备上，滚动事件仅在滚动事件开始和结束时执行，因此您可能会在用户完成滚动之前有一些延迟。