首页 > 解决方案 > 加载更多未显示在移动视图上

问题描述

我正在使用 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);

        }
      });
    }
  });
});

标签: phpjqueryajax

解决方案


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

因此,在您的代码中也放入此代码:

$(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

推荐阅读