如何使用phonegap在android中实现加载更多功能？答案

【问题标题】：How to implement load more function in android using phonegap?如何使用phonegap在android中实现加载更多功能？
【发布时间】：2012-12-26 05:31:59
【问题描述】：

我有一个应用程序，我在其中显示来自服务的项目。在这里，我有大约 200 件物品要展示，有些难以看到。

在这里，我想通过显示前 20 个来显示加载更多功能，然后单击加载更多，它将显示下一个 20，依此类推。如果有人有想法，我无法找到实现此功能的方法，请帮助我。

【问题讨论】：

如何将所有 200 个项目保存在设备中的某个位置（比如共享偏好设置），但只显示其中的 20 个并在用户希望时进一步加载。
您好，感谢您的回复，您能告诉我该怎么做吗？

标签： javascript android jquery cordova jquery-mobile

【解决方案1】：

使用 phonegap/cordova 加载 200 个项目并存储它们不是一个好方法。我们正在谈论已经很慢的 HTML5 + JS 包装器，这将使它变得更慢。

更好的方法是使用 ajax 加载更多数据，当您到达列表视图结束或单击“加载新内容”按钮时将触发 ajax 调用。

在这里您会找到一种带有“加载新内容”按钮的方法：

http://jsfiddle.net/knuTW/2/

在这里你会找到一种在到达列表视图结束时自动加载列表视图的方法：

http://jsfiddle.net/dhavaln/nVLZA/

这个例子需要这个 jQuery 插件：http://imakewebthings.com/jquery-waypoints/

这是我的示例，自动加载 listview 和 $.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 调用。

【讨论】：

【解决方案2】：

虽然我对 Phonegap 和 Shared Preferences 不太熟悉，但一点点研究工作让我知道，在 phonegap 中没有直接使用共享偏好的方法（据我所知）。

如果您仍想在 Phonegap 中使用共享首选项，则需要为其添加插件。
我能找到的另一种方法是使用Local Storage using HTML5 and JSON。
另一种方法是使用 Lawnchair 实现数据库。你会找到一个很好的解决方案here 和here
到目前为止我发现的最有效的方法之一是Webkit Client side Databse Storage。它会以某种方式很好地解决您的问题。

【讨论】：