3

如何在移动页面的末尾自动触发 ajax 请求（使用 jquery 和 jquery mobile）？编码

$(document).bind('pageshow #item_search', function(){
        $('#content_table').scroll(function() {
           if($(window).scrollTop() + $(window).height() == $(document).height()) {
               //ajax
               alert("end of page");
           }
        });
});

在台式电脑上很好用，但在我的手机上什么也没做...

4

3 回答 3

2

这是一个工作示例：http: //jsfiddle.net/Gajotres/v4NxB/。

我把它作为概念证明，所以它远非完美的演示，但它可以为你提供足够的信息来正确使用它。

它使用这个名为Waypoints的jQuery 插件来检测底部滚动触摸

我已经用 jQM 1.0 构建了它，所以我不能告诉你它是否适用于 jQuery Mobile 1.3.1。

这将检测底端：

$('#example-offset-pixels').waypoint(function() {
    //notify('100 pixels from the top');
}, { offset: 100 });

还有另一种我曾经使用过的解决方案，但它不是我的。它最初用于以前的一些Jasper答案。

此版本适用于所有 jQM 版本，包括 1.3：http: //jsfiddle.net/Gajotres/Bn2Du/。它使用纯 jQuery，不需要额外的框架。我已经在 iPad 和 Android 设备上对其进行了测试。

于 2013-06-07T14:36:51.060 回答
1

如果您使用 JQM：找到一种找到好的代码、识别页面底部并加载更多内容的方法是很长时间的。

最后我用了这个：

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
    NameFunctionWhatCallsAjax();
   }
});

我把它放在我的标题中：

<meta name="viewport" content="width=device-width, initial-scale=1">

它也适用于 Iphone 和其他移动设备。在 NameFunctionWhatCallsAjax(); 您调用的函数例如 ajax 调用新行。我希望它也对你有用。

在 ajax 成功中，例如：

              success: function(response){
        $('#loading').remove();
            $('.infinite-container').append(response);
        $('.infinite-container').append("<li id='loading'>Lo9ading new rows..</li>");
            $('.infinite-container').listview('refresh');
          }

由于 jquery mobile 主题，您需要刷新以获得与 jquery mobile 相同的视觉外观。

于 2014-02-18T10:00:54.513 回答
1

事件的 jQuery Mobile文档建议使用 scrollstart 和 scrollstop。尝试：

$('#content_table').bind("scrollstop", function() {
         if($(window).scrollTop() + $(window).height() == $(document).height()) {
         alert("end of page");
     }
});

或者您可以将 scrollstart/scrollstop 与 touchmove 结合起来尝试获取实时事件：

$('#content_table').bind("scrollstart", function() {
     $(this).bind("touchmove", function() {
         if($(window).scrollTop() + $(window).height() == $(document).height()) {
             alert("end of page");
         }
     }
}).bind("scrollend", function() {
     $(this).unbind("touchmove");
});
于 2013-06-07T12:07:45.117 回答