-
layui流加载
2020-04-16 09:53:02layui流加载 html指定一个容器 <div class="top" id="top" style="display:none">返回頂部</div> <ul id="demo"> </ul> javascript layui.use('flow', function(){ var $ = ...layui流加载
-
html指定一个容器
<div class="top" id="top" style="display:none">返回頂部</div> <ul id="demo"> </ul>
-
javascript
layui.use('flow', function(){ var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。 var flow = layui.flow; flow.load({ elem: '#demo' //指定列表容器 ,isAuto: true //是否自动加载。默认true。如果设为false,点会在列表底部生成一个“加载更多”的button,则只能点击它才会加载下一页数据。 ,isLazyimg: true //是否开启图片懒加载。默认false。如果设为true, ,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页 var lis = []; //以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回) $.get('/ListMap/smc/selSoluManageList?pageNum='+page +'&pageSize=10', function(res){ //假设你的列表返回在data集合中 layui.each(res.page, function(index, item){ lis.push('<li><img lay-src="'+item.Commodity_MasterDiagram+'"></li>'); }); //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页 //totalPage为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多 next(lis.join(''), page < res.totalPage); }); } }); //flow.lazyimg(); //图片懒加载 });
-
返回顶部
$(window).on('scroll', function () { // 判断显示还是隐藏按钮 if($(this).scrollTop()>=$(this).height()){ $('#top').fadeIn('slow'); }else { $('#top').fadeOut('slow'); } }); $(function(){ $('#top').click(function(){ // html,body取并级,处理浏览器兼容 $("html,body").animate({ scrollTop: 0, screenLeft: 0, }, 400); }); });
- 注:详情请见 layui
-
-
layui流加载.md
2020-04-15 10:43:16layui流加载。 -
layui 流加载
2018-06-04 10:11:40{:C('LAYUI2')}css/layui.css?version={:C('VERSION')}" rel="stylesheet" type="text/css" /><script type="text/javascript" src="{:C('LAYUI2')}layui....第一步引入js文件
<link href="/layui.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/layui.all.js"></script>
第二步布局
<div class="contian"> <div class="content"> <div class="lr flow-default"></div> </div> </div>
第三步jsvar openid = "{$openid}"; var token = "{$token}"; var page = 1; layui.use('flow', function () { var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。 var flow = layui.flow; flow.load({ elem: '.lr' //指定列表容器 , isAuto:true, scrollElem: '.lr',done: function (page,next) { var url = "接口地址"; //传递的参数 var data = { openid: openid, token: token, page: page } var lis = []; $.get(url, data, function (params) { var list = params.list; var sum = params.count_page; var list1 = ''; var word = "要跳转的html"; for (var index = 0; index < list.length; index++) { var l = list[index]; lis.push('<a href="'+word +'" style="background: #fff;" class="lr1 clearfix">' + '<img id="img" src="' + l.pic_url + '" alt="">' + '<div class="zj clearfix">' + '<span class="keer">' + l.author + '</span>' + '<span class="keer1">' + '<img id="img1" src="{:C('WEIXIN_IMAGE')}yan.png" alt="">' + '<span id="pp">' + l.view + '</span>' + '</span>' + '</div>' + '<div class="pi clearfix">' + '<span>' + l.title + '</span>' + '</div>' + '</a>') } //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页 //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多 next(lis.join(''), page < sum); }); } });
-
thinkPHP+LayUI 流加载实现功能
2020-10-16 07:12:30主要介绍了thinkPHP+LayUI 流加载实现功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 -
LayUI流加载的基本使用
2019-06-30 10:34:41最近写了一个个人博客项目,博客显示用的LayUI流加载实现的。这里整理一下吧。流加载的原理其实和分页一样,每次加载一页的数据显示,只是加载的方式不同。LayUI流加载的官方文档地址:...最近写了一个个人博客项目,博客显示用的LayUI流加载实现的。这里整理一下吧。流加载的原理其实和分页一样,每次加载一页的数据显示,只是加载的方式不同。LayUI流加载的官方文档地址:https://www.layui.com/doc/modules/flow.html
首先在HTML页面中定义一个存放加载内容的标签(页面样式可以根据自己需求进行调试):
<ul class="flow-default" id="LAY_demo1"></ul>
使用JS根据上面给定的标签,渲染插入数据。代码如下。
layui.use('flow', function(){ var flow = layui.flow; flow.load({ elem: '#LAY_demo1', //流加载容器 scrollElem: '#LAY_demo1', //滚动条所在元素,一般不用填 done: function(page, next){ //执行下一页的回调 //模拟数据插入 setTimeout(function(){ var lis = []; //数据请求地址,page,第几页,默认page是从2开始返回 $.post('blog/fysj2',{page:page},function(res){ layui.each(res.data, function(index, item){ //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页 //流加载插入内容部分,根据自己需求更改,这里做的案例,所以就写的比较简单 lis.push("<div class='list-group'><a href='#' class='list-group-item' onclick='details("+item.id+")'>"+ "<h4 class='list-group-item-heading'>"+item.title+"</h4><p class='list-group-item-text'>" +item.user.nickname+" | "+item.createDate+ "</p></a>"+ "</div>"); }); //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多 next(lis.join(''), page < res.pages); //假设总页数为 10 $('[data-toggle="tooltip"]').tooltip() }); }); } });
后台请求响应方法。分页查询,查询完返回给前台
@RequestMapping(value="/fysj") @ResponseBody public Object fysj(Integer page, BlogsForm form) { Sort sort=Sort.by(Sort.Direction.DESC, "updateDate"); //分页,页数从0开始的,所以需要-1,每页10条数据 Pageable pageable = PageRequest.of(page-1, 10, sort); Page<Blogs> blog; //查询 Specification<Blogs> spec = buildSpec2(form); blog = blogService.findAll(spec, pageable); return FlowloadUtils.buildResult(blog); }
返回的JSON数据类型工具类FlowloadUtils:
public class FlowloadUtils { public static HashMap<String, Object> buildResult(Page page) { HashMap<String, Object> result=new HashMap<>(); result.put("code", 0); result.put("msg",""); result.put("pages", page.getTotalPages()); result.put("data", page.getContent()); return result; } }
页面加载效果如下:
加载完成后:
-
img layui 流_layui流加载及传参
2020-12-20 02:24:04//不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。var flow = layui.flow;flow.load({elem: '#demo' //指定列表容器,end:'没有数据啦o(╥﹏╥)o',done: function(page,next){ //到达临界...layui.use('flow', function(){
var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。
var flow = layui.flow;
flow.load({
elem: '#demo' //指定列表容器
,end:'没有数据啦o(╥﹏╥)o'
,done: function(page,next){ //到达临界点(默认滚动触发),触发下一页
var lis = [];
var cate_id = "{$cate_id}";//传的关键字id
var order="{$order}";//传的排序方式
$.get('/taochucom/mobile/index.php?app=search&act=store&flow=1&page='+page+'&cate_id='+cate_id+'&order='+order, function(res){
res = JSON.parse(res);
//假设你的列表返回在data集合中
layui.each(res.data, function(index, item){
lis.push('
'+item.store_name+'
'+item.user_name+'进店
'+item.region_name+'
上架'+item.goods_count+'件商品
}else{
lis.push('
'+item.store_name+'
'+item.user_name+'进店
'+item.region_name+'
上架'+item.goods_count+'件商品
});
//console.log(res);//页面打印数据
//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
/*************************流加载***********************/
if($_GET['flow'] == 1){
$stores = $model_store->find(array(
'conditions' => 'state = ' . STORE_OPEN . $condition_id . $conditions,
'limit' =>$page['limit'],
'order' => (empty($_GET['order']) || !in_array($_GET['order'], $orders)) ? 'sort_order' : $_GET['order'],
'join' => 'belongs_to_user,has_scategory',
'fields' => 'store.store_id,user_name,store_name,region_name,store_logo,credit_value',
'count' => true //允许统计
));
$model_goods = &m('goods');
foreach ($stores as $key => $store)
{
//店铺logo
empty($store['store_logo']) && $stores[$key]['store_logo'] = Conf::get('default_store_logo');
//商品数量
$stores[$key]['goods_count'] = $model_goods->get_count_of_store($store['store_id']);
//等级图片
$step = intval(Conf::get('upgrade_required'));
$step < 1 && $step = 5;
$stores[$key]['credit_image'] = $this->_view->res_base . '/images/' . $model_store->compute_credit($store['credit_value'], $step);
}
$result['data'] = array_values($stores);
$page['item_count']=$model_store->getCount(); //获取统计数据
$this->_format_page($page);
$result['pages'] = $page['page_count'];//总页数
echo json_encode($result);die;
}
/*************************流加载***********************/
$order=(isset($_GET['order']))?($_GET['order']):"";
$this->assign('order',$order);
$this->assign("cate_id",$cate_id);
$this->assign('stores', $stores);
$this->assign('regions', $regions);
$this->assign('scategorys', $scategorys);
$this->assign('page_info', $page);
/* 配置seo信息 */
$this->_get_curlocal_title('search-store');
$this->_config_seo($this->_get_seo_info('store', $cate_id));
$this->display('search.store.html');
?>
-
img layui 流_thinkPHP+LayUI 流加载实现功能
2020-12-20 02:23:56htmljs,要引入layui.jslayui.use('flow', function() {...flow.load({elem: '#container' //流加载容器//滚动条所在元素,一般不用填,此处只是演示需要。,done: function(page, next){ //执行下一页的回调console.... -
layui 流加载筛选数据不显示
2019-08-16 09:22:34layui 流加载筛选数据不显示 可以这么做 <div class="commodity"> <ul id="LAY_demo1"> </ul> </div> function getdata(status=1){ //关键代码 把容器下的div移除掉就行了 $... -
layui流加载flow模块自定义【加载更多】
2020-10-13 10:15:27layui流加载模块自定义【加载更多】 首先看看是引用的哪个,如果是这个layui.all.js,那就找到这个文件。 <script src="/static/common/layui-v2.5.6/layui.all.js " media="all "></script> 然后找到... -
layUI流加载的使用(通俗易懂)
2020-08-06 16:12:01LayUI流加载的官方文档地址 首先下载layui的架包 把下载好架包的文件取出,放入到项目中,我这里使用的是idea 3.在HTML页面中定义一个存放加载内容的标签 <%@ page contentType="text/html;charset=UTF-8" ... -
layui流加载实例
2017-03-21 15:13:54预加载layui的js,css html: js: $(document).ready(function(){ var limit = 10; layui.use('flow', function(){ var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery -
使用layUI流加载
2018-07-28 16:11:47前端 &lt;ul id="flow_list"&gt; &... layui.use(['laypage', 'jquery', 'layer','flow'], function() { layui.flow.load({ elem: '#flow_list' -
layui查档页面_Layui流加载文档 - layui.flow
2020-12-19 00:22:30信息流即异步逐页渲染列表元素,这是你页面已经存在的一段列表,你页面初始时只显示了6个12……6你想通过加载更多来显示余下列表,那么你只需要执行方法:flow.load(options) 即可layui.use('flow', function(){var ... -
layui流加载+搜索 示例
2020-09-18 10:35:48div class="layui-row search_div"> <input type="text" name="sech" autocomplete="off" placeholder="搜索" class="layui-input search_text" id="title_cen"> <button type="button" class="layui-... -
thinkPHP+LayUI 流加载实现
2019-09-27 19:03:39...div class="layui-container" id="container"> </div> js,要引入layui.js layui.use('flow', function() { var $ = layui.jquery; var flow = layui.flow; flow.lo... -
layui流加载及传参
2017-09-27 14:11:00<ul class="shop-list ml10 mr10 store_list" id='demo' style="margin-top:80px;"></ul> <script type="text/javascript"> layui.use('flow', function(){ var $ = layui.jquery; //不... -
layui 流加载 + tp5 实例
2018-12-06 10:58:34<div class="flow-default" id="handle_demo"...--此id为流加载应用范围标识--> <table> <tr> <th>id</th> &am -
layui 流加载 配合thinkPHP大U方法 点击加载页面事件
2019-01-17 15:16:17<script type="text/javascript"> layui.use('flow', function(){ ... elem: '#dianhua' //流加载容器 ,scrollElem: '#dianhua' //滚动条所在元素,一般不用填,此处只是演示需要... -
LayUI流加载显示 返回顶部、未加载条数
2020-07-03 14:42:32返回顶部 //两个按钮的代码 <div class="isFloat"> <p id="count" class="p11" style=...//未加载条数 <p class="p11" style="margin-left: 3px;">未加载</p>//返回顶部 </div> //cs -
layUI流加载,点击筛选后数据没有渲染出来?
2019-03-29 11:18:262、然后用另一个ajax进行数据流加载: <script> var pageSize = 10; var pageIndex = 0; layui.use('flow', function () { var $ = layui.jquery; var flow = layui.flow; flow.load({ elem: '#... -
layui流加载出现“syndax error”的错误
2020-02-27 23:50:461、先看看bug长啥样 这里html显示的是语法错误,那就是前台layui的使用不当造成的 2、解决 图1 图2 ...不要使用图1 的方式加载数据,使用图2的方式。至于为什么,有待考虑。 =.=不想打字了… ...