layui流加载


html指定一个容器
<div class="top" id="top" style="display:none">返回頂部</div>
        <ul id="demo">
		</ul>



javascript
layui.use('flow', function(){
    	  var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
    	  var flow = layui.flow;
    	  flow.load({
    	    elem: '#demo' //指定列表容器
    	    ,isAuto: true //是否自动加载。默认true。如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据。
    	    ,isLazyimg: true  //是否开启图片懒加载。默认false。如果设为true，
    	    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
    	      var lis = [];
    	      //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
    	      $.get('/ListMap/smc/selSoluManageList?pageNum='+page +'&pageSize=10', function(res){
    	        //假设你的列表返回在data集合中
    	        layui.each(res.page, function(index, item){
    	          lis.push('<li><img lay-src="'+item.Commodity_MasterDiagram+'"></li>');
    	        }); 
    	        
    	        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
    	        //totalPage为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
    	        next(lis.join(''), page < res.totalPage);    	
    	      });
    	    }
    	  });
    	  //flow.lazyimg(); //图片懒加载
    	});



返回顶部
$(window).on('scroll', function () {
      // 判断显示还是隐藏按钮
      if($(this).scrollTop()>=$(this).height()){
        $('#top').fadeIn('slow');
      }else {
        $('#top').fadeOut('slow');
      }
    });
    $(function(){
            $('#top').click(function(){
                // html，body取并级，处理浏览器兼容
                $("html,body").animate({
                 scrollTop: 0,
                screenLeft: 0,
                }, 400); 
             });
        });


注：详情请见 layui

第一步引入js文件
<link href="/layui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/layui.all.js"></script>
第二步布局
<div class="contian">
      <div class="content">
            <div class="lr flow-default"></div>
        </div>
    </div>
第三步js
 var openid = "{$openid}";
   var token = "{$token}";
   var page = 1;
   layui.use('flow', function () {
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        flow.load({
            elem: '.lr' //指定列表容器
            , isAuto:true,
            scrollElem: '.lr',done: function (page,next) {
               var url = "接口地址";
             //传递的参数
                var data = {
                    openid: openid,
                    token: token,
                    page: page
                }
                var lis = [];
                $.get(url, data, function (params) {
                    var list = params.list;
                    var sum = params.count_page;
                    var list1 = '';
                   var word = "要跳转的html";
                    for (var index = 0; index < list.length; index++) {
                        var l = list[index];
                     lis.push('<a href="'+word +'" style="background: #fff;" class="lr1 clearfix">' +
                            '<img id="img" src="' + l.pic_url + '" alt="">' +
                            '<div class="zj clearfix">' +
                            '<span class="keer">' + l.author + '</span>' +
                            '<span class="keer1">' +
                            '<img id="img1" src="{:C('WEIXIN_IMAGE')}yan.png" alt="">' +
                                '<span id="pp">' + l.view + '</span>' +
                                '</span>' +
                                '</div>' +
                                '<div class="pi clearfix">' +
                                '<span>' + l.title + '</span>' +
                                '</div>' +
                                '</a>')
                      
                    }
                   
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < sum);
                });
            }
        });

最近写了一个个人博客项目，博客显示用的LayUI流加载实现的。这里整理一下吧。流加载的原理其实和分页一样，每次加载一页的数据显示，只是加载的方式不同。LayUI流加载的官方文档地址：https://www.layui.com/doc/modules/flow.html

首先在HTML页面中定义一个存放加载内容的标签（页面样式可以根据自己需求进行调试）:

<ul class="flow-default" id="LAY_demo1"></ul>

使用JS根据上面给定的标签，渲染插入数据。代码如下。

layui.use('flow', function(){
  var flow = layui.flow;
 
  flow.load({
    elem: '#LAY_demo1', //流加载容器
    scrollElem: '#LAY_demo1', //滚动条所在元素，一般不用填
    done: function(page, next){ //执行下一页的回调
      
      //模拟数据插入
      setTimeout(function(){
            var lis = [];
            //数据请求地址，page，第几页，默认page是从2开始返回
            $.post('blog/fysj2',{page:page},function(res){
        	layui.each(res.data, function(index, item){
        		//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //流加载插入内容部分，根据自己需求更改，这里做的案例，所以就写的比较简单
 	            lis.push("<div class='list-group'><a href='#' class='list-group-item' onclick='details("+item.id+")'>"+
 	                		"<h4 class='list-group-item-heading'>"+item.title+"</h4><p class='list-group-item-text'>"
 	                		+item.user.nickname+"   |   "+item.createDate+
 	                		"</p></a>"+
 	                		"</div>");
 	          }); 	   	       
             //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
            next(lis.join(''), page < res.pages); //假设总页数为 10
            $('[data-toggle="tooltip"]').tooltip()
        });  
      });
    }
  });

后台请求响应方法。分页查询，查询完返回给前台

@RequestMapping(value="/fysj")
@ResponseBody
public Object fysj(Integer page, BlogsForm form) {
	Sort sort=Sort.by(Sort.Direction.DESC, "updateDate");
	//分页，页数从0开始的，所以需要-1，每页10条数据
	Pageable pageable = PageRequest.of(page-1, 10, sort);
	Page<Blogs> blog;
	//查询
	Specification<Blogs> spec = buildSpec2(form);
	blog = blogService.findAll(spec, pageable);
	return FlowloadUtils.buildResult(blog);
}

返回的JSON数据类型工具类FlowloadUtils：

public class FlowloadUtils {

	public static HashMap<String, Object> buildResult(Page page) {
		HashMap<String, Object> result=new HashMap<>();
		result.put("code", 0);
		result.put("msg","");
		result.put("pages", page.getTotalPages());
		result.put("data", page.getContent());
		return result;
	}
}

页面加载效果如下：



加载完成后：

layui.use('flow', function(){
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
flow.load({
elem: '#demo' //指定列表容器
,end:'没有数据啦o(╥﹏╥)o'
,done: function(page,next){ //到达临界点(默认滚动触发)，触发下一页
var lis = [];
var cate_id = "{$cate_id}";//传的关键字id
var order="{$order}";//传的排序方式
$.get('/taochucom/mobile/index.php?app=search&act=store&flow=1&page='+page+'&cate_id='+cate_id+'&order='+order, function(res){
res = JSON.parse(res);
//假设你的列表返回在data集合中
layui.each(res.data, function(index, item){
              lis.push('
'+item.store_name+'
'+item.user_name+'进店
'+item.region_name+'
上架'+item.goods_count+'件商品
');
}else{
              lis.push('
'+item.store_name+'
'+item.user_name+'进店
'+item.region_name+'
上架'+item.goods_count+'件商品
');
});
//console.log(res);//页面打印数据
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
/*************************流加载***********************/
if($_GET['flow'] == 1){
$stores = $model_store->find(array(
'conditions'  => 'state = ' . STORE_OPEN . $condition_id . $conditions,
'limit'   =>$page['limit'],
'order'   => (empty($_GET['order']) || !in_array($_GET['order'], $orders)) ? 'sort_order' : $_GET['order'],
'join'    => 'belongs_to_user,has_scategory',
'fields'  => 'store.store_id,user_name,store_name,region_name,store_logo,credit_value',
'count'   => true   //允许统计
));
$model_goods = &m('goods');
foreach ($stores as $key => $store)
{
//店铺logo
empty($store['store_logo']) && $stores[$key]['store_logo'] = Conf::get('default_store_logo');
//商品数量
$stores[$key]['goods_count'] = $model_goods->get_count_of_store($store['store_id']);
//等级图片
$step = intval(Conf::get('upgrade_required'));
$step < 1 && $step = 5;
$stores[$key]['credit_image'] = $this->_view->res_base . '/images/' . $model_store->compute_credit($store['credit_value'], $step);
}
$result['data'] = array_values($stores);
$page['item_count']=$model_store->getCount();   //获取统计数据
$this->_format_page($page);
$result['pages'] = $page['page_count'];//总页数
echo json_encode($result);die;
}
/*************************流加载***********************/
$order=(isset($_GET['order']))?($_GET['order']):"";
$this->assign('order',$order);
$this->assign("cate_id",$cate_id);
$this->assign('stores', $stores);
$this->assign('regions', $regions);
$this->assign('scategorys', $scategorys);
$this->assign('page_info', $page);
/* 配置seo信息 */
$this->_get_curlocal_title('search-store');
$this->_config_seo($this->_get_seo_info('store', $cate_id));
$this->display('search.store.html');
?>