移动端web 滚动分页

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端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端页面下拉 滚动分页


以上是关于移动端web 滚动分页的主要内容,如果未能解决你的问题,请参考以下文章

列表组件抽象-滚动列表及分页说明

html5移动端阻止滚动问题。

客户须知等内容在移动端弹窗查看分页vue如何实现

记录WEUI中滚动加载的一个BUG

移动web之滚动篇

移动 Web 之滚动篇