249045439
网站制作

前端制作框架layui.js流加载应用

发表日期:2026-06-21   作者来源:www.liudz.com   浏览:433   标签:    

这个是官方网站的示例地址:https://www.layui.com/demo/flow.html

下面介绍一下我在用中的一些问题:前端jsfunctionflow(){layui.use(flow,function(){var$=layui.jquery;//不需要额外加载jQuery,flow模块本身是有依靠jQuery的,直接用即可。varflow=layui.flow;$(#newsBox).html();//清空容器flow.load({elem:#newsBox//放内容的容器,isAuto:false,isLazyimg:true,done:function(page,next){//到达临界点(默认滚动触发),触发下一页varlis=[];id={$id}vararr=$(#search).serialize();//获得form提交的数据url={:U(Download/search)}?id=+id+page=+1++arr//id 分类id page / 页码 arr 其他的筛选条件$.get(url,function(res){//假设你的列表返回在data集合中layui.each(res.data,function(index,item){lis.push(item);//可在这里循环数据,也可以在后台});//实行下一页渲染,第二参数为:满足加载更多的条件,即后面仍有分页//pages为Ajax返回的总页数,只有目前页小于总页数的状况下,才会继续出现加载更多next(lis.join(),pageres.pages);});}});});}示例图片:

$(#keys).blur(function(){flow()//输入关键字后,重新加载数据})$(#select|sub).click(function(){flow()})$(.select|item).change(function(){//alert(1)flow()//改变下拉选项的时候,重新加载数据})flow()//页面加载时候,加载数据后台代码就是同意到数据查看数据publicfunctionsearch(){if(IS|AJAX){$pagesize=6;//每页显示个数$currentpage=I(page,1);//目前页码$recordstart=($currentpage|1)*$pagesize;//开始条数$cid=I(id);$map[category|id]=$cid;$map[is|show]=1;$map[status]=1;$category=I(category);$title=I(title);if($title){$map[title]=array(like,%.$title.%);$this|title=$title;}foreach($categoryas$k=$v){if($v){$map[model|id]=array(like,%,.$v.,%);}}$totalrows=M(download)|where($map)|order(title,create|timedesc,iddesc)|count();$list=M(download)|where($map)|order(order|id,create|timedesc,iddesc)|limit($recordstart,$pagesize)|select();$news|list=;foreach($listas$k=$v){$url=$v[type|id]==1?.$v[file]:$v[url];$news|list.=ahref=.$url.target=|blankclass=wowfadeInUpdivclass=d1ones.$v[title]./divdivclass=d2ones语言:.$v[lang].更新日期:.date(Y|m|d,$v[create|time])./divdivclass=d3立即下载/div/a;}$res[data]=$news|list;$all=ceil($totalrows/$pagesize);$res[pages]=$all;$this|ajaxReturn($res);}}如此就可以解决 layui流加载,重新加载,筛选查找的需要,达到局部刷新的成效,最适合手机端和响应式页面

layui流加载其他应用可以去官方网站 ,滑动到指定地方加载图片或内容 在手机端还是有不少的应用。

如没特殊注明,文章均为厦门做网站的公司 原创,转载请注明来自https://www.scksm.com/news/list/2/https://www.scksm.com/news/zhizuo/2031.html