移动端web 滚动分页

方法一：前端代码：

<script type="text/javascript">
        var page = 2; //当前页的页码
        var flagNoData = false; //false
        var allpage = @Model.PageCount; //总页码，会从后台获取
        function showAjax(currentIndex) {
            $.ajax({
                url: "@Url.Action("GetEmployeeData", "Home")",
                type: "GET",
                data: {"pageNum":currentIndex},
                success: function (data) {
                    //要执行的内容
                    showContent(data);
                    if (currentIndex >= allpage) { //当前页码大于等于总页码
                        flagNoData = true;
                    };
                    page += 1;    //页数加1
                }
            })
        }
        function scrollFn() {
            //真实内容的高度
            var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
            //视窗的高度
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
            //隐藏的高度
            var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            if (flagNoData) { //数据全部加载完了
                return;
            } else if (pageHeight - viewportHeight - scrollHeight < 10) {    //如果满足触发条件，执行
                showAjax(page);
            }
        }
        $(window).bind("scroll", scrollFn);    //绑定滚动事件

        function showContent(datacontent)
        {
            $("#contentDiv").append(datacontent);
        }
    </script>

适合移动端、PC端页面下拉 滚动分页

方法二（推荐）：

插件 https://github.com/ximan/dropload

下载插件，引用css 和 js：

<link rel="stylesheet" href="~/Content/dropload.css" />

<script type="text/javascript" src="~/Scripts/dropload.min.js"></script>

@section scripts{
    <script type="text/javascript" src="~/Scripts/dropload.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var page = 1;
            var pageSize = 10;

            $(".content").dropload({
                scrollArea: window,
                loadDownFn: function (me) {
                    page++;
                    var result = '';
                    $.ajax({
                        url: "@Url.Action("GetEmployeeData", "Home")",
                        type: "GET",
                        data: { "pageNum": page },
                        success: function (data) {
                            var arrlen = data.length;
                            if (arrlen > 0) {
                                showContent(data);
                                me.resetload();
                            } else {
                                me.lock();
                                me.noData();
                            }
                        },
                        error: function (xhr, type) {
                            alert('Ajax error:' + xhr + type);
                            me.resetload();
                        }
                    })
                }
            })
        });

        function showContent(datacontent) {
            $("#contentDiv").append(datacontent);
        }
    </script>
    }

 

转载于:https://www.cnblogs.com/ecolin/p/6806583.html