这个是官网的示例地点:https://www.layui.com/demo/flow.html
下面引见一下我在应用中的一些结果:
前端js
function flow() {
layui.use('flow', function(){
var $ = layui.jquery; //不消分外加载jQuery,flow模块自己是有依赖jQuery的,直接用便可。
var flow = layui.flow;
$('#newsBox').html('');// 清空容器
flow.load({
elem: '#newsBox' //放内容的容器
,isAuto: false
,isLazyimg: true
,done: function(page, next){ //达到临界点(默许动弹触发),
做网站公司,触发下一页
var lis = [];
id="{$id}"
var arr=$('#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(''), page < res.pages);
});
}
});
});
}
示例图片:
$('#keys').blur(function(){
flow() //输出要害词后,重新加载数据
})
$('#select_sub').click(function(){
flow()
})
$('.select_item').change(function(){
//alert(1)
flow() //改变下拉选项的时候,重新加载数据
})
flow() //页面加载时候,加载数据
布景代码就是接遭到数据查询数据
public function search(){
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($category as $k=>$v){
if($v){
$map['model_id']=array('like','%,'.$v.',%');
}
}
$totalrows=M('download')->where($map)->order('title,create_time desc,id desc')->count();
$list = M('download')->where($map)->order('order_id,create_time desc,id desc')->limit($recordstart,$pagesize)->select();
$news_list='';
foreach($list as $k =>$v){
$url=$v['type_id']==1 ? .$v['file'] :$v['url'];
$news_list.='
'.$v['title'].'
言语:'.$v['lang'].' 更新日期:'.date('Y-m-d',$v['create_time']).'
当即下载
';
}
$res["data"]=$news_list;
$all=ceil($totalrows/$pagesize);
$res['pages']=$all;
$this->ajaxReturn($res);
}
}
如许就能处理 layui流加载,重新加载,选择查找的需求,达到部分改革的成果,对照合适手机端和响应式页面
layui流加载其他应用能够去官网 ,滑动到指定位置加载图片或内容 在挪动端照旧有很多的应用。