移動端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>
    }