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);
}
});
}
});
});