layui.flow 流加载 往下滑 自动加载

  @extends('new_m.base')    
    @section('content')
        <div class="navigation5">
            <ul>
                <li><a href="{{route('m.inquiry.lists', array('status'=>'quote'))}}">已报价</a></li>
                <li><a href="{{route('m.inquiry.lists', array('status'=>'unquote'))}}">未报价</a></li>
                <li><a href="{{route('m.inquiry.lists', array('status'=>'deal'))}}">已成交</a></li>
                <li class="active"><a href="{{route('m.inquiry.lists', array('status'=>'cancel'))}}">已取消</a></li>
                <li><a href="{{route('m.inquiry.lists', array('status'=>'shortage'))}}">暂时缺货</a></li>
            </ul>
        </div>
        <div class="clearfix"></div>
        @csrf
        <div class="iq_list mt45">
            <ul id="inquiryList">
            </ul>
        </div>
        <div class="clearfix"></div>
    @endsection
    
    @section('js')
        <script type="text/javascript" src="/static/m/js/layui/layui.js"></script>
        <script type="text/javascript">
            layui.use(['jquery', 'layer', 'flow'], function () {
                var flow = layui.flow;
                var layer = layui.layer;
                var _token = $("input[name='_token']").val();
                
                getData();
                
                function eachList(list) {
                    var html = '';
                    $.each(list, function (i, item) {
                        var quoteHtml ='';
                        if (item.quotation_item) {
                            $(item.quotation_item).each(function (k,v) {
                                quoteHtml += '<li><input type="checkbox" name="quotation_detail_id[]" value="'+v.id+'" data-invoice_type="'+item.invoice_type+'" tt="'+v.inquire_id+'"> '+v.sale_quote+'</li>';
                            });
                        }
                        html +='<li>' +
                                '  <div class="iq_item">'+
                                '  <img src="'+item.img+'" onerror="javascript:this.src=\'/static/home/images/no_pic.png\'">'+
                                '  <div class="iq_info">'+
                                '       <ul>'+
                                '           <li><span>cas号：</span>' + item.cas + '</li>'+
                                '           <li><span>产品名称：</span>' + item.prod_name + '</li>'+
                                '           <li><span>包装规格：</span>' + item.pack + '</li>'+
                                '           <li><span>发票类型：</span>' + item.invoices.type + '</li>'+
                                '           <li><span>求购备注：</span>' + item.note + '</li>'+
                                '           <li><span>询单时间：</span>' + item.created_at + '</li>'+
                                '       </ul>'+
                                '   </div>'+
                                '   <span class="iq_status red">已取消</span>'+
                                '   </div>'+
                                '   <div class="iq_foot">'+
                                '        <div class="iq_foot_info"><a href="javascript:re_buy('+item.id+');" class="blue" iqid="'+item.id+'">重新求购</a></div>'+
                                '   </div>';
                        '</li>';
                    });
                    return html;
                }
                
                function getData() {
                    // 流加载
                    flow.load({
                        elem: '#inquiryList' //指定列表容器
                        ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                            $.ajax({
                                url: '/inquiry/get_inquiry',
                                dataType: 'json',
                                type: 'post',
                                data:{
                                    page: page,
                                    pageSize: 10,
                                    status : 'cancel',
                                    _token: _token
                                },
                                success: function (result) {
                                    if (result.code == 0) {
                                        var data = result.data;
                                        next(eachList(data.list), page < data.pages);
                                    } else {
                                        layer.msg(result.msg);
                                    }
                                },
                                error: function () {
                                    layer.msg('系统错误');
                                }
                            });
                        },
                        end: '<li class="no-more">已经拉到底了啦~~</li>'
                    });
                }
            });
        </script>
     @endsection