移动端web 滚动分页

Posted 2020-09-16

前端代码：

<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端页面下拉 滚动分页