加载更多内容未显示在移动视图上

时间:2018-07-25 11:47:24

标签: php jquery ajax

我正在使用ajax函数加载更多数据,它在桌面上可以正常运行,但是当我在移动网络浏览器中点击该特定页面时,它将无法正常工作。这是我的ajax代码。

$(document).ready(function(){
  $(window).scroll(function(){
    var lastID = $('.load-more').attr('lastID');
    var  isFirstRun=false;
     if(($(window).scrollTop() == $(window).height() - $(document).height()) && (lastID != 0)){

      $.ajax({
        type:'POST',
        url:'getdata2.php' ,
        data:'id='+lastID,

        beforeSend:function(){
          $('.load-more').show();
        },
        success:function(html){
          $('.load-more').remove();
          $('#postList').append(html);

        }
      });
    }
  });
});

1 个答案:

答案 0 :(得分:0)

我认为对于移动设备,此窗口滚动事件未被识别。您只需将警报放入滚动功能即可进行调试。如果甚至无法识别警报,则意味着滚动事件不适用于移动设备。

因此,在您的代码中还要添加以下代码:

$(document.body).on('touchmove', function(){
    var lastID = $('.load-more').attr('lastID');
    var  isFirstRun=false;
    if(($(window).scrollTop() == $(window).height() - $(document).height()) && (lastID != 0)){

     $.ajax({
     type:'POST',
     url:'getdata2.php' ,
     data:'id='+lastID,

     beforeSend:function(){
       $('.load-more').show();
     },
     success:function(html){
      $('.load-more').remove();
      $('#postList').append(html);
    }
  });
}
}); // for mobile