开心一笑: 会买水果的狗狗

    关注微信公众号

    QQ群:831045818

    app下载

    当前位置:首页> layui > 技术文档 > 正文
    Layui使用流加载+模板引擎
    发布时间:2021-10-29 14:14:19.0 浏览次数:
    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();
    		});
    		
    	
    		// 加载数据
    		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(); //首次加载
    
    	});


    关注"都市百货" 了解南陵

    微信咨询wanglf2r(不拉群 发广告者勿加)

    0
    0
    上一篇:会买水果的狗狗 上一篇:2021年安徽南陵县首届大学生乡村旅游节在丫山风景区举行

    评论已有0

    提交评论

    热门评论

    南陵新闻
    公示公告
    常用查询
    风光南陵
    走出南陵
    友情链接