Question

如何在移动页面的末尾自动触发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");
           }
        });
});

在桌面电脑上运行良好，但在我的手机上什么都不做......

Answer 1

这是一个有效的例子：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设备上测试过它。

Answer 2

事件的jQuery Mobile docs建议使用scrollstart＆amp; 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");
});

Answer 3

如果您使用JQM：很长一段时间才找到找到好的代码，识别页面底部以及加载更多内容的方法。

最后我使用了这个：

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

我把它放在我的标题中：

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

它也适用于Iphone和其他移动设备。在NameFunctionWhatCallsAjax（）;你调用的函数make例如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移动主题，您需要刷新以获得与jquery mobile相同的视觉外观。

如何在移动页面的末尾自动“加载更多”

3 个答案: