layui实现信息流加载

layui实现信息流加载

引用一下layui官网的信息流概念：
信息流即异步逐页渲染列表元素，这是你页面已经存在的一段列表，你页面初始时只显示了6个

//HTML
<ul id="demo">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

你想通过加载更多来显示余下列表，那么你只需要执行方法：flow.load(options) 即可

//javascript
layui.use('flow', function(){
  var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
  var flow = layui.flow;
  flow.load({
    elem: '#demo' //指定列表容器
    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
      var lis = [];
      //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
      $.get('/api/list?page='+page, function(res){
        //假设你的列表返回在data集合中
        layui.each(res.data, function(index, item){
          lis.push('<li>'+ item.title +'</li>');
        }); 
        
        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < res.pages);    
      });
    }
  });
});

详细参数可以查看官网：layui信息流加载

下面开始介绍我的方法：
1、列表首次打开默认加载5条数据
2、当滚动条与底部距离50px时，触发加载更多，再次加载5条新的数据
3、如此循环，直到判断最后一次请求的数据不足5条时，则把剩余数据加载出来并显示没有更多了。

// 信息流加载
layui.use('flow', function(){
    var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
    var flow = layui.flow;
    flow.load({
        elem: '.goods-menu' //指定列表容器
        ,md:50	//与底部的临界距离，默认50。即当滚动条与底部产生该距离时，触发加载
        ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
            // console.log(page + ' ' + next );
            var lis = [];
            var pagei = page + 1;
            // console.log(pagei);
            //通过ajax加载新的数据
            $.ajax({
                type: "GET",
                dataType: 'json',  // 返回数据的数据类型json
                url: 'http://***********/chainGoodsList?pageindex='+ pagei,
                data: {shop_id:shop_id,pagesize:pages},  //传送的数据
                success: function (res) {
                    layui.each(res.data, function(index, item){
                        var html =
                            '<li class="good-list" id="' + item.goods_id + '" data-guid="' + item.goods_id + '">'
                            + '<a href="javascript:void(0)">'
                            + '<img src="' + item.goods_image + '"alt="' + item.goods_jingle + '">'
                            + '<div class="goods-details">'
                            + '<p class="goods-details__title">'+  item.goods_name +'</p>'      //标题
                            + '<p class="goods-details__describe">' + item.goods_jingle + '</p>'  //描述
                            + '<p class="goods-details__money">￥' + item.salePrice + '</p>'    //价格
                            + '<span class="goods-details__camp">' + item.goods_state + '</span>'    //自提
                            + '<span class="goods-details__offer">' + item.goods_tp + '</span>'    //限时特价
                            + '</div>'
                            + '</a>'
                            + '</li>';
                        lis.push(html);
                    });
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为定义的获取条数，只有获取得到的条数大于等于定义的条数的情况下，才会继续出现加载更多
                    next(lis.join(''), pages <= res.data.length);
                }
            });
        }
    });
});