1

这将被移植到原生应用程序的 phonegap。我有一个包含大约 1,000 个条目的过滤列表。每个条目将有一个独特的图像和独特的文字。我一直在对其进行测试，并且存在明显的性能问题。加载大约需要 30 秒，当您搜索某些内容时，需要另外 30 秒才能显示项目。

我想知道是否有办法将列表限制为 20 或 25 个项目，当用户向下滚动时，应用程序将继续过滤项目（类似于 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>
4

2 回答 2

2

你可以用这个

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

（感谢 Ran我如何使用 JQuery 来检测用户是否滚动到页面底部？）

发出 ajax 调用而不是警报来请求下一个 X 条目。您必须保留一个柜台（这样您就知道您要求哪些条目）。

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

//注意这个问题可能会涉及到您的内容大小JQuery Mobile User scroll to bottom。归功于 davehale23

于 2013-05-16T19:29:43.773 回答
1

你可以用这个

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/

于 2014-02-19T09:26:08.263 回答