thinkphp5 向下滑动触发“ 加载更多 ”；ajax 异步加载更多

版权声明： https://blog.csdn.net/qq_27987023/article/details/83281331

实现效果：手机页面向下滚动加载数据

前端代码：

<!--思路：向下滑动触发ajax，向后台请求数据，如果能取回数据，则更新偏移量，反之提醒无更多数据-->
<div class="list-box">
    {volist name="jifen_list" id="vo"}
        <div class="list">
            <div class="pull-left list-l">
                <h5>{$vo.reward_type}</h5>
                <h5>{$vo.create_time|date="Y-m-d",###}</h5>
            </div>
            {if condition="$vo.jifen_num>=0"}
                <div class="pull-right list-r">+{$vo.jifen_num}</div>
            {else /}
                <div class="pull-right list-r">-{$vo.jifen_num}</div>
            {/if}
        </div>
    {/volist}
    <input type="hidden" id="more_div">
</div>
<!--隐藏域：用以存储异步加载偏移量-->
<input type="hidden" id="offect" value="8" />
<!--加载状态-->
<div class="no-more" id="show_more">没有更多了</div>

javascript 代码：

<script>
    $(window).scroll(
        function() {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
            $("#show_more").html('数据加载中');
            $offect = $("#offect").val();
            $.post('{:url("home/mmember/my_integral")}',{offect:$offect}, function(data){
                if(data != -1){
                    var to_array = eval("("+data+")");
                    var str = "";
                    for(var p in to_array){
                        str += '<div class="list"><div class="pull-left list-l"><h5>'+to_array[p].reward_type+'</h5><h5>'+to_array[p].create_time+'</h5></div>';
                        if(to_array[p].size == 'positive'){
                            str += '<div class="pull-right list-r">+'+to_array[p].jifen_num+'</div></div>';
                        }else{
                            str += '<div class="pull-right list-r">-'+to_array[p].jifen_num+'</div></div>';
                        }
                    }
                    $("#offect").val($offect*1+8);
                    $("#more_div").before(str);
                }else{
                    $("#show_more").html('没有更多数据了');
                }
            }, 'json'); 
        }
    });
</script>

后台数据接收：

<?php
public function my_integral(){
	//我的积分
    $member_id = Session::get("member_id");
    $member_jifen = Db::name("member")->field('jifen_account')->where("id",$member_id)->find();
    $jifen_list = Db::name("jifen_history")->where("member_id",$member_id)->order("create_time desc")->limit(8)->select();

    $input_post = input("post.");
    if(isset($input_post) && !empty($input_post)){
        $offect = $input_post['offect'];
        $show_list = Db::name("jifen_history")->where("member_id",$member_id)->order("create_time desc")->limit($offect,8)->select();
        if(isset($show_list) && !empty($show_list)){
            foreach($show_list as $key=>$item){
                $show_list[$key]['create_time'] = date("Y-m-d",$item['create_time']);
                if($item['jifen_num']>0){
                    $show_list[$key]['size'] = 'positive';
                }else{
                    $show_list[$key]['size'] = 'negative';
                }
            }
            return json_encode($show_list);
        }else{
            return -1;
        }
    }else{
        $this->assign("member_jifen",$member_jifen);
        $this->assign("jifen_list",$jifen_list);
	    return $this->fetch('my_integral'); 
    }
}

?>