使用layUI流加载

前端

<ul id="flow_list">
</ul>
<script>
    layui.use(['flow'], function() {
        layui.flow.load({
            elem: '#flow_list'
            ,done: function(page, next){
              var lis = [];
              layui.$.get("{:url('index_data')}?p="+page, function(res){
                layui.each(res.data.list, function(index, item){
                  lis.push('<li>'+ item.goods_id +'</li>');
                }); 
                next(lis.join(''), page < res.data.all_page);  
              });
            }
          });
    });
</script>

后端

    public function index_data()
    {
        $p        = input('p') ?? 1;
        $p_n      = input('p_n') ?? config('paginate.list_rows');
        $list     = Db::table('tp_goods')->order('goods_id ASC')->limit(($p - 1) * $p_n, $p_n)->select();
        $count    = Db::table('tp_goods')->count();
        $all_page = ceil($count / $p_n);
        $data     = [
            'p'        => $p,
            'p_n'      => $p_n,
            'count'    => $count,
            'all_page' => $all_page,
            'list'     => $list,
        ];
        return json(['code' => 0, 'msg' => '加载成功！', 'data' => $data]);
    }