layui流加载 终止flow.load(),执行第二个流加载时禁止上一个流加载执行

layui流加载 终止flow.load()

思路是当点击事件触发时,把ul移除,绑定的事件移除,重新加载ul,相当于把之前的删除重新加载了flow.load。

主要代码是:
$("#demo").remove();
$(document).unbind(); //把容器的事件解除绑定

//初始化流加载
getAjaxData();
function getAjaxData (){
	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);    
	      });
	    }
	  });
	});
}
//点击事件
$('#btn').click(function () {
    $("#demo").remove();	
    $(document).unbind();
    $('#tab-active').append('<ul id="demo"></ul>');
    getAjaxData();	//执行流加载函数
});
发布了18 篇原创文章 · 获赞 4 · 访问量 4879

猜你喜欢

转载自blog.csdn.net/xiaojun201593/article/details/104006361
今日推荐