吕神的自我修养

ajax页面底部 滚动加载效果 实例

html部分：

<ul id="scrollBox">
    //ajax读取的 data.html 使用append 的方式添加到这里        
</ul>
<div id="scrollPages">
    //ajax 状态文字输出到这里 【数据加载中】【数据加载成功】【没有数据了】
</div>

js代码需要jquery支持。

//滚动加载 开始
$(function(){
    var loading = false; // 状态锁 默认 false
    var next_url = 'ajax.php'; //ajax读取数据地址，ajax 每次都修改为 data.next_url 下一页地址
    var $pages = $('#scrollPages'); //绑定 分页容器 分页状态 在此位置输出
    var $scrollBox = $('#scrollBox'); // 绑定内容 ajax 把
    
    var _loading = function(){ console.log('数据加载中...');  $pages.html('数据加载中...');  }
    var _loadok = function(){ console.log('数据加载成功！');  $pages.html('数据加载成功！');  }
    var _nodata = function(){ console.log('没有数据了') ;     $pages.html('没有数据了'); }
    
    $(window).scroll(function(){
        var sH =  $(document).height() - $(this).scrollTop() - $(this).height();//页面底部距离
        var sp = $(window).height() - ( $pages.offset().top - $(document).scrollTop() ) ; //分页div 距离win 底部
        if( loading ){return false ;}
        //条件
        if ( sp > 33 ){
            loading = true;
            _loading();
            $.getJSON(next_url,{}, function(data){
                console.log(data);
                next_url = data.next_url;
                if(data.html){
                    $scrollBox.append( data.html );
                    $('.zzbsList .zzbsInfo').txtCur({n:60});
                    loading = false;
                    _loadok();
                }
                //判断是否还有吓一跳
                if( !next_url ){ loading = true ; _nodata() };
                
            });
        }
    });// 滚动 结束 $(window).scroll

    //页面加载完成 清空$scrollBox 内容
    //页面加载完成 执行第一次
    $(window).scroll();
});

php 文件 ajax.php 代码：

<?php
header("Content-type:text/html;charset=utf-8");
//休息1秒钟 ,模拟网速不好，可以看清 ajax状态变化
sleep(1);
//读取GET提交的页码
$p = (int)$_GET['p'] ;
//准备返回的数据
$d = array();
//下一页 地址
$d['next_url'] = 'api/bisai-list.php?p='.($p+1);
//数据 html格式 ，jquery会把他插入到 <ul id="scrollBox"> 中。
$d['html'] = '<li> ajax 读取到的数据，当前页面 '.($p+1).' </li>';
//简单判读 只有10页面内容
if($p > 10){
    $d =  array(); //没有数据了  js 主要判断 $d['next_url'] 的值
}
//返回json数据
die(json_encode($d));
?>

————–我是分割线—————

上边的 js 代码存在一个问题。

//页面加载完成 执行第一次$(window).scroll(); 尽管调用了滚动事件，但无法满足条件： if ( sp > 33 ) 出发ajax加载数据。
后来想想，干脆把 ajax加载数据部分代码封装成函数_ajaxLoad，在需要的时候直接调用。
1.页面第一加载时调用
2.滚动满足条件时调用
修改js代码如下：

//滚动加载 开始
$(function(){
    var loading = false; // 状态锁 默认 false
    var next_url = 'api/bisai-list.php'; //ajax读取数据地址，ajax 每次都修改为 data.next_url 下一页地址
    var $pages = $('#scrollPages'); //绑定 分页容器 分页状态 在此位置输出
    var $scrollBox = $('#scrollBox'); // 绑定内容 ajax 把
    
    var _loading = function(){ console.log('数据加载中...');  $pages.html('数据加载中...');  }
    var _loadok = function(){ console.log('数据加载成功！');  $pages.html('数据加载成功！');  }
    var _nodata = function(){ console.log('没有数据了') ;     $pages.html('没有数据了'); }
    var _ajaxLoad = function(){
            loading = true;
            _loading();
            $.getJSON(next_url,{}, function(data){
                console.log(data);
                next_url = data.next_url;
                if(data.html){
                    $scrollBox.append( data.html );
                    $('.zzbsList .zzbsInfo').txtCur({n:60});
                    loading = false;
                    _loadok();
                }
                //判断是否还有吓一跳
                if( !next_url ){ loading = true ; _nodata() };
                
            });
    }
    
    $(window).scroll(function(){
        var sH =  $(document).height() - $(this).scrollTop() - $(this).height();//页面底部距离
        var sp = $(window).height() - ( $pages.offset().top - $(document).scrollTop() ) ; //分页div 距离win 底部
        console.log(sp);
        if( loading ){return false ;}
        if ( sp > 33 ){
            //滚动满足条件时调用 加载数据
            _ajaxLoad();
        }
    });
    //页面加载完成 执行第一次加载数据
    _ajaxLoad();
});
//滚动加载 结束