h5页面触底加载--div触底加载

页面触底加载

	page = 1 //当前页
    pages = 0 //总页数
    $(window).scroll(function(){
        //判断是否滑动到页面底部
        if($(window).scrollTop() === $(document).height() - $(window).height()){
            // TODO 滑动到底部时可请求下一页的数据并加载，加载可使用append方法
            if(page != pages){
                load(page += 1) //加载数据的方法
            }
        }
    });

	function load(page){
		//ajax请求数据 用append方法添加到页面
		//拿到后台数据 确定当前页和总页数
		page = res.data.current_page 
        pages = res.data.last_page
	}

div 触底加载

<!--设置div纵向滚动-->
<div style="max-height: 15rem;overflow-y:scroll;" id="Box">

	page = 1 //当前页
    pages = 0 //总页数
    $("#Box").scroll(function () {
        let scrollTop = document.getElementById("Box").scrollTop;
        let clientHeight = document.getElementById("Box").clientHeight;
        let scrollHeight = document.getElementById("Box").scrollHeight;
        if (scrollTop + clientHeight >= scrollHeight) {
            if(bpage != bpages){
                load(bpage += 1)//加载数据的方法 与上面页面触底加载方式一致
            }
        }
    })