205 移动端实现滑动到底部加载下一页

最新推荐文章于 2022-12-09 10:51:46 发布

phpstory

最新推荐文章于 2022-12-09 10:51:46 发布

阅读量435

点赞数

分类专栏： PHP

原文链接：https://blog.csdn.net/weixin_42085115/article/details/90054036

版权

PHP 专栏收录该内容

258 篇文章 5 订阅

订阅专栏

<ul>
	<!-- 底部标志，用于往底部标志之前添加 -->
	<li id="end-sign"></li>
</ur>

<script type='text/javascript'>
    // 默认当前起始页
    var page = 1;
    // 当前是否允许加载
    var isLoading = true;

	$(document).ready(function(){
       // 加载第一页(页数为1)
        window.onload = waterallowData();
        
        $(window).scroll(function() {
            //如果滚动条滚动的高度加上窗口可视高度， 大于文档的总高度+50， 那么说明滚动条滚动到了底部。
            if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
                //去加载数据]
                if (window.isLoading) {
                    waterallowData();
                }
            }
        });
    });	

	//获取页面顶部被卷起来的高度
    function scrollTop() {
        //->document.body.scrollTop(chrome)
        //->document.documentElement.scrollTop(firefox/IE)
        return Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    }
 
    //获取页面文档的总高度
    function documentHeight() {
        //->现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和
        //->document.documentElement.scrollHeight都可以
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    }
 
    //获取页面浏览器视口的高度
    function windowHeight(){
        //->document.compatMode有两个取值。
        //->BackCompat:标准兼容模式关闭。 CSS1Compat:标准兼容模式开启。
        return (document.compatMode == "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight;
    }
    
	//加载数据
    function waterallowData() {

        $.ajax({
            async:false,  //如果是移动端的话，这里必须要定义为false
            type:'get',
            url:"{:url('course/getCourse')}",
            data:{page:page},
            dataType:'json',
            success:function(response){
                if(response.code==1){
                    // 重新定义当前所在页(后端已加1至下一页)
                    window.page = response.page;
                    
                    var html = '';

                    $.each(response.data,function (index,item) {            
                            html += '<li class="course_item"  onclick="courseDetail('+item.id+')">';
                            html +=     '<div class="course_img">';
                            html +=         '<img src="'+item.thumbnail+'">';
                            html +=     '</div>';
                            html += '<div class="course_title">';
                            html +=     '<span>'+item.id+'--'+item.title+'</span>';
                            html += '</div>';
                            html += '<div class="open_group_btn">去学习</div>';
                            html += '</li>';
                    });

                    // 将遍历出的数据赋值
                    $("#end-sign").before(html);
                }else{
                   // 加载不出数据，已至最后一页
                    window.isLoading = false;
                    window.page = response.page;
                }
            }
        });
    }
</script>