Question

使用cordova作为构建应用程序和wordpress的平台，使用安装为后端的JSON API插件开发应用程序。我写了这两个函数来从我的网站上抓取帖子，然后在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/

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

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

1 个答案: