layui流加载 终止 flow.load()
思路是当点击事件触发时,把 ul 移除,绑定的事件移除,重新加载 ul,相当于把之前的删除重新加载了flow.load。
1 2 3
| 主要代码是: $(" $(document).unbind(); //把容器的事件解除绑定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| //初始化流加载 getAjaxData(); function getAjaxData (){ layui.use('flow', function(){ var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。 var flow = layui.flow; flow.load({ elem: ' ,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); }); } }); }); } //点击事件 $(' $(" $(document).unbind(); $(' getAjaxData(); //执行流加载函数 });
|