Question

这将移植到本机应用的phonegap。我有一个包含大约1,000个条目的筛选列表。每个条目都将具有唯一的图像和独特的文本。我一直在测试它，并且存在明显的性能问题。加载大约需要30秒，当您搜索某些内容时，需要另外30秒才能显示这些项目。

我想知道是否有办法将列表限制为20或25个项目，当用户向下滚动时，应用程序将继续过滤项目（simliar to gmail for android）。这样，应用程序将更快地响应。

以下是jsFiddle的示例。您不会遇到任何性能问题，因为所有图像都相同且只有少数项目，但您可以看到结构。

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Type Search Criteria" data-filter-theme="c">
        <li class="ad"><a href='#xpage'>
             <img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
            <h2>Abcdefghijklmnopqr</h2>
            <p><i>amessage</i></p>
            <p class="ui-li-aside" ><i class='icon-remove'></i><font color="#cccccc" >NOT SEEN</font></p>
        </a></li>
        <li class="ad"><a href='#xpage'>
            <img src="http://www.appmalt.info/AMobile/Birdapp/img/none.jpg"/>
            <h2>Abcdefghijklmnopqr</h2>
            <p><i>amessage</i></p>
            <p class="ui-li-aside"><i class='icon-ok'></i><font color="green" style='font-weight:bold;padding-left:0.7em;'>SEEN IT!</font></p>
        </a></li>
   ...
   *****CONTINUE THIS FOR 1000 ENTRIES****
   ...
</ul>

Answer 1

你可以用这个

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
       //Place ajax call here
   }
});

（致{Ran How do I use JQuery to detect if a user scrolls to the bottom of the page?）

发出ajax调用而不是警报来请求下一个X条目。你必须保留一个计数器（所以你知道你要求的条目）。

//也许if语句中的数学需要一些修复。这取决于你的项目。

//请注意可能涉及您的内容大小JQuery Mobile User scroll to bottom的问题。积分给davehale23

Answer 2

你可以用这个

var timer    = setInterval(function () {
    scrollOK = true;
}, 100),
scrollOK = true,
count    = 20;
$(window).bind('scroll', function () {
if (scrollOK) {
    scrollOK = false;
    if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) {
        //now load more list-items because the user is within 100px of the bottom of the page
        console.log('You Hit Bottom!');
        var out = [];
        for (var i = 0; i < 10; i++) {
            out.push('<li>' + (count++) + '</li>');
        }
        $('ul').append(out.join('')).listview('refresh');
    }
}
});

http://jsfiddle.net/knuTW/

jQuery Mobile LIMIT列表查看25项

2 个答案: