比较全面的php分页导航类

瀑布流分页： 当浏览者浏览了当前页面内容后，向下拉动浏览器滚动条，本来还在服务器上的内容，会根据滚动条的拖动，动态地从服务器上按一定的单位（类似分页）下载下来。这样还带来了一个好处，就是以前已经浏览过的内容，还在浏览器当前窗口的上部（可以理解为被缓存了），要再次浏览的话，直接向上拖动滚动条或转动鼠标 滚轮即可。而采用分页技术的话，要查看先前的内容，必需再次点击鼠标（比如“上一页”等），再次请求服务器端的页面（假设没有采用缓存技术的），再次等待 页面数据的下载和呈现 。实现这种浏览效果，可以改善用户体验（最起码有新鲜感），编程技术也不难，采用 Ajax 技术是一种绝好的解决方案之一。希望更好的用户体验被大家创造出来。

 

分页存储过程：http://hudeyong926.iteye.com/blog/764703

var page = 0;
$(function () {
    var scrollTimer;
    jsonScrollPageData(0);//默认加第一页

    //下面滚动取第二页++
    $(window).on('scroll', function () { //页面出现滚动条生效，即滚动事件
        if (scrollTimer) {
            clearTimeout(scrollTimer);
            scrollTimer = null;
        }
        scrollTimer = setTimeout(function () {
            jsonScrollPageData($(this).scrollTop());
        }, 200);//0.2s
    });
});

function jsonScrollPageData(position) {
    var offsetHeight = 44;
    var viewportHeight = $(window).height();
    var bodyHeight = $('body').height();

    if ((bodyHeight <= position + viewportHeight + offsetHeight) && page >= 0) {
        $.ajax({
            type: 'GET',
            url: url + "?t=" + Math.random(),
            data: {page: ++page},
            async: false,
            dataType: 'JSON',
            success: function (jsonData) {
                if (jsonData.length > 0) {

                } else { //已全部显示
                    page = -1;
                }
            }
        });
    }
}

移动端上拉加载下拉刷新插件

<div class="container">
    <div id="mescroll" class="my-address mescroll">
        <div id="addressList" class="address-list">
            <!-- 这里是ajax返结果list -->
        </div>
    </div>
</div>

  需要注意的地方是页面的container必须有固定高度，否则上拉无效。前后端的pagesize必须要相同

//创建MeScroll对象
var mescroll = new MeScroll("mescroll", {
    up: {
        callback: upCallback, //上拉加载的回调
        clearEmptyId: "addressList",
        htmlNodata: '<p class="upwarp-nodata">-- 已经到底了 --</p>',
        noMoreSize: 5, //这个是当页面显示不足这个数字的时候不显示到底定义的文字，比如不满足5条，则不显示htmlNodata  
    }
});

//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
function upCallback(page) {
    $.ajax({
        url: '/screen/ajaxList?page=' + page.num + '&pageSize=' + page.size,
        dataType: 'json',
        type: 'GET',
        success: function (json) {
            console.log(json)
            var data = json.data;
            var _html = $('#addressListTmpl').render(data);
            $('#addressList').append(_html);
            //必传参数(总数据个数, 总页数)
            mescroll.endByPage(curPageData.length, totalPage);
        },
        error: function (e) {
            //联网失败的回调,隐藏下拉刷新和上拉加载的状态
            mescroll.endErr();
        }
    });
}