移动端的分页

  移动端会考虑用户的体验度，在首页不会一次性加载所有的数据

具体思路：当用户刚打开页面，会自动加载页面默认的几条数据（由前后端协调而定），一般情况前端需要向后台返回两个参数：page和rows  page代表页数；rows代表几条数据；给window一个滚动事件，判断可视窗口的高度与滚动的高度和是否大于页面的高度，如果大于，则通过ajax向后台返回参数，拿到数据，进行渲染；如果为了体验度，也可以在滚动的时候用一个延时器配合动态图来做。

注意：当后台数据库的数据加载完后，如果不进行判断，用户再次滚动时会报错，所以这是一个坑；在这里前端可以判断后端也可以控制（看具体沟通）；如果前端判断：可以根据每次给后台返回多少条数据进行判断，因为每次传的数据次数是不变的。

html代码就不写了，直接看js的代码：

window.onload=function(){
     var page=1;
    /*第一次调用*/
    changeAjax(page,rows)  //page是页数，rows是几条数据


/*当页面滚动的时候*/
window.onscroll = function() {
var tt = $(window).height();
var cc = $(document).height();
var bb = $(document).scrollTop();
if (tt + bb >= cc) {

                        //这里可以根据需求利用延时器以及动态图来提高用户的体验度
add();
}
}


function add() {
p_index++;
changeAjax(page, rows);
}
/*封装AJAX*/
function changeAjax(page,rows){
$.ajax({
type: "GET",
url: "",
data:{"page":page,"rows":rows},
async: true,
success: function(res) {
if(res.data.length==rows){

                                       渲染数据

                                }else{

                                        可以加一张动态图，提示用户已经没有数据了；

                                }
}

});
}
}