Layui使用流加载+模板引擎

var data = {pin:0,type:1}; // 定义要往接口传递的值，pin=是否是第一页，type=接口的分类

layui.use(['jquery','layer','carousel','laytpl','flow'],function(){
		var $=layui.jquery
		,layer = layui.layer
		,carousel=layui.carousel
		,laytpl = layui.laytpl
		,flow = layui.flow
		;
		// 切换分类
		$(".types").on("click",function (res){
			let id = $(this).attr('id');
			data.pin = 0; // 重新加载页面内容
			$("#dataView").empty();
    		$(document).unbind();
			data.classify_id = id;
			$(".slider").css("left","-350px");
			// alert();
			flowLoad();
		});
		
		// 页面的搜索功能
		$(".serach").on("input",function (res) {
			data.serach = $(".serach").val();
			data.pin = 0;
			$("#dataView").empty();
    		$(document).unbind();
			flowLoad();
			$('#inp_guardianPhone').blur(); // 关掉下方键盘
			return false;
		});

		// 加载数据
		function flowLoad(){
			layer.load(2,{
				scrollbar: false
				, shade: [0.5,'#fff'] //0.1透明度的白色背景
			});
			// 流加载
			flow.load({
				elem: '#dataView'
				,mb: 50
				,done: function (page, next){ //到达临界点（默认滚动触发），触发下一页
					data.page = page;
					data.limit = 5;
					data.user = user;
					$.post("{:url('地址')}",data,function(res){
						layer.closeAll("loading");
						var getTpl  = dataScript.innerHTML
						,view = document.getElementById("dataView")
						;
						laytpl(getTpl).render(res.data.list, function (html){
							if (data.pin === 0)
							{
								// 首次加载
								view.innerHTML = html;
								data.pin = 1;
							}else{
								// 继续加载分页
								view.innerHTML += html;
							}
						})
						next('列表HTML片段', page < res.data.page);
					},'json');
				}
			});
			

		}
		flowLoad(); //首次加载

	});