我有一个应用程序,其中显示来自服务的项目。在这里,我有大约200个项目要展示,这是很难看到的。
在这里,我希望通过显示前20来显示加载更多功能,然后点击加载,它将显示下一个20,依此类推。如果有人有想法请帮助我,我无法找到实现方法。
答案 0 :(得分:1)
使用phonegap / cordova加载200个项目并存储它们不是一个好方法。我们正在谈论已经很慢的HTML5 + JS包装器,这会让它变得更慢。
更好的方法是使用ajax加载更多数据,当你到达listview结束或点击“加载新内容”按钮时会触发ajax调用。
在这里,您将找到“加载新内容”按钮的方法:
在此处,您将找到一种在达到listview结束时自动加载列表视图的方法:
http://jsfiddle.net/dhavaln/nVLZA/
此示例需要此jQuery插件:http://imakewebthings.com/jquery-waypoints/
这是我的自动加载列表视图和组合中的$ .ajax的示例:
http://jsfiddle.net/Gajotres/v4NxB/
代码示例,我再说一遍这只是一个虚拟示例(仍在使用虚拟示例):
// load test data initially
for (i=0; i < 10; i++) {
$("#list").append($("<li><a href=\"index.html\"><h3>" + i + "</h3><p>z</p></a></li>"));
}
$("#list").listview('refresh');
// load new data when reached at bottom
$('#footer').waypoint(function(a, b) {
// Load some dynamic data with $.ajax
$.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
dataType: "jsonp",
jsonpCallback: 'successCallback',
async: true,
beforeSend: function() {
$.mobile.showPageLoadingMsg(true);
},
complete: function() {
$.mobile.hidePageLoadingMsg();
},
success: function (result) {
ajax.parseJSONP(result);
},
error: function (request,error) {
//alert('Network error has occurred please try again!');
}
});
$('#footer').waypoint({
offset: '100%'
});
}, {
offset: '100%'
});
var ajax = {
parseJSONP:function(result){
//var jsonObj = jQuery.parseJSON(parameters);
$("#list").append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
$("#list").append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
$("#list").append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
$("#list").append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
$("#list").append('<li>Released:<span> ' + result[0].released+ '</span></li>');
$("#list").listview('refresh');
}
}
您还需要在最后一次结束之前阻止另一个$ .ajax调用。
答案 1 :(得分:0)
虽然我对Phonegap和共享偏好不太熟悉,但是一些研究工作让我知道没有直接的方法在phonegap中使用共享首选项(据我所知)。