js 实现无限加载分页（适合移动端）_JavaScript

js 实现无限加载分页（适合移动端）

原理：当滚动条到达底部时，执行下一页内容。

判断条件需要理解三个概念：
1.scrollHeight 真实内容的高度
2.clientHeight 视窗的高度，即在浏览器中所能看到的内容的高度
3.scrollTop 视窗上面隐藏掉的部分，即滚动条滚动的距离

思路：
1.使用fixed定位加载框
2.使用$(window).scroll();方法来触发是否加载
3.通过真实内容高度 - 视窗高度 - 上面隐藏部分 < 5 ,作为加载触发的条件

var page=1; //当前页的页码

    var allpage; //总页码，会从后台获取

    function showAjax(page){

        $.ajax({

            url:"",

            type:"",

            data:"",

            success:function(data){

                //要执行的内容

                showContent();

                page++; //页数加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(pageHeight - viewportHeight - scrollHeight < 20){    //如果满足触发条件，执行

            showAjax(page);

        }

    }

    $(window).bind("scroll",scrollFn);  //绑定滚动事件

搜索

热门标签:

js 实现无限加载分页（适合移动端）