jQuery+Ajax+PHP滚动加载

Posted 2021-03-23 叶少翔

function ajax_more(){  
    $type = isset($_POST[‘type‘]) ? (int)Yin::_input(‘post.type‘) : 0;  
    //传递的参数  
    $page = isset($_POST[‘page‘]) ? (int)Yin::_input(‘post.page‘) : 2;  
    //每页显示的条数  
    $pagesize = 10;  
    //查询出来的列表数据  
    $list = $this->product->get_page_list($type, ‘‘, $page, $pagesize);  
    echo json_encode($list);  
    exit;  
}  

//下拉加载js代码  
var page = 2,//记录页数  
//布尔参数，判断是否允许加载  
bool = true,  
//页面的总高度、、//记录划过的高度  
st = $(document).innerHeight();  
//$(‘.loading‘).offset().top;  
//列表内容少的时候做兼容处理  
if(!bool){  
    $(‘.loading‘).hide();  
    $(‘.nothing_all‘).show();  
}  
function refresh(){  
    if(!bool){return;}  
    bool = false;  
    //console.log(page);  
    var data = {  
        ‘page‘ : page,  
        ‘pagesize‘ : {:$pagesize:},  
        ‘type‘ : {:$type:}  
    }  
    $.post(  
        ‘/index.php?m=shop&c=list&a=ajax_more‘,  
        data,  
        function(d){  
            if (d.length>0) {  
                var html = ‘‘;  
                for (var i = 0; i < d.length; i++) {  
                    var v = d[i];  
                    //具体的代码  
                };  
                $(‘#append‘).append(html);  
                if (d.length==data.pagesize) {    
                    page++;  
                    st = $(document).innerHeight();  
                    bool = true;  
                }  
            }else{  
                bool = false;  
            }  
    },‘json‘);  
}  
$(window).scroll(function(event) {  
      var s = $(document).scrollTop()+$(window).height();  
      if(s > (st-100)){//底部预留100px空间  
          if(!bool){  
              $(‘.loading‘).hide();  
              $(‘.nothing_all‘).show();  
              return false;  
          }else{  
              refresh();  
          }  
      }  
});