<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; //不用额外加载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('<li class="mt10" style="background-color:#fff"><dl><dt><a href="mobile/store/'+item.store_id+'"><img src="'+item.store_logo+'" width="80" height="80" /></a></dt><dd><h3><a href="mobile/store/'+item.store_id+'">'+item.store_name+'</a></h3><p>'+item.user_name+'<span style="position: absolute;right: 10px;color:#fff" class="into">进店</span></p><p>'+item.region_name+'</p><p>上架'+item.goods_count+'件商品<i><img src="'+item.credit_image+'" /></i></p></dd></dl></li>');
}else{
lis.push('<li class="mt10" style="background-color:#fff"><dl><dt><a href="mobile/store/'+item.store_id+'"><img src="'+item.store_logo+'" width="80" height="80" /></a></dt><dd><h3><a href="mobile/store/'+item.store_id+'">'+item.store_name+'</a></h3><p>'+item.user_name+'<span style="position: absolute;right: 10px;color:#fff" class="into">进店</span></p><p>'+item.region_name+'</p><p>上架'+item.goods_count+'件商品<i></i></p></dd></dl></li>');
});
//console.log(res);//页面打印数据
//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
</script>

<?php

/*************************流加载***********************/

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');

?>

转载于:https://www.cnblogs.com/manwk/p/7601503.html

layui流加载及传参相关推荐

  1. layui 流加载flow遇到的问题

    目的:在界面中想实现,进入界面加载部分数据,拥有搜索功能,可加载新的数据以替换旧数据,替换过程中想要清空现有数据时,使用jquery方法 $(*).remove(); 删除了流控件,特别记录一下问题, ...

  2. vue加载html传参,Vue页面跳转时传参总结

    1 路由跳转 &圈是的编小久据直请结未屏屏会气机页实应高lt;router-link   to="/login"&gt能调页代事求都学是功发解开宗这维视如间请前框来 ...

  3. layui信息加载流的方式加载数据

    SSM项目中使用layui信息加载流的方式加载数据 这里首先jsp页面来一个div容器,这里数数据显示的地方 //css样式: <style type="text/css"& ...

  4. 照片墙瀑布流加载与阻止加载

    网上大部分主流的瀑布流应用基本都是由后端在提供图片地址的同时提供图片宽高,这样,前端不必等待图片渲染完成,可以根据图片的宽高先把装载图片的容器或父节点先放上页面,完成基础性的布局,再让图片以渐变或其他 ...

  5. js图片加载效果(延迟加载+瀑布流加载)

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  6. 微信小程序--瀑布流加载

    本文主要介绍小程序的瀑布流加载.实现的原理是,通过bindload监听图片加载,然后计算每张图片的高度,将list根据高度分别,创建2个新数组col1.col2. 1..xml <view cl ...

  7. 图片瀑布流加载和购物车

    图片瀑布流加载 注释中为详细注释 动态添加元素 // 创建图片数组方便后续添加图片路径时使用var img = ["1.jpg", "2.jpg", " ...

  8. layui loading加载

    项目场景 layui loading加载: @Overridevar loading = layer.msg('信息获取中', {icon: 16, shade: 0.3, time:0}); //定 ...

  9. layui ajax流加载,layui中流加载layui.flow

    1.引入layui.css和layui.js 2. html中定义容器 js部分: layui.use('flow', function(){ var $ = layui.jquery; //不用额外 ...

最新文章

  1. Spark _08窄依赖和宽依赖stage
  2. 前端学习(3348):数组方法的运用和数值
  3. eclipse编写wordcount提交spark运行
  4. java和asp.net core,VS 2019教程:创建ASP.NET Core Web App
  5. 中年程序员对核心竞争力“不可替代”的重新认识
  6. 软件工程知识点总结——第一、二部分
  7. 安卓升级AndroidX手把手教程
  8. Ubuntu20.04设置静态IP
  9. MySQL里什么是主键_mysql主键是什么?
  10. MCU器件选型---主流厂商
  11. Error:java: Cannot run program E:/Java/jdk1.7.0_80/bin/java (in directory C:\Users\dell\.IntelliJ
  12. 温故而知新:汽车以太网技术发展10年(上)
  13. 92.【SpringCloud NetFilx】
  14. Nvidia arch 型号对照
  15. 网络安全基础——ARP欺骗
  16. panabit流量控制
  17. 使用python_openslide剪切大型tif图
  18. 开发自己的网上支付案例代码(易宝支付php)
  19. 【MongoDB】MongoDB入门篇,修行靠自学
  20. 芯片设计IP核公司总结与分析

热门文章

  1. NLP《语言模型(二)-- 神经网络NNLM语言模型》
  2. 二维数组各行求和_数组入门 | 数组的维度和尺寸
  3. YOLOv4论文阅读(附原文翻译)
  4. 去哪儿-19-detail-ajax
  5. C++中? : 运算符的使用
  6. PDS+VL Motion对发动机曲轴系统不平衡载荷进行仿真分析
  7. Ubuntu16.04下codeblocks16.01安装,适用于不同的架构
  8. 项目管理随感-项目管理是什么?
  9. mysql unix formtime_linux下find命令-atime,-ctime,-mtime真正含义
  10. android 简易涂鸦板,canvas实现的简易涂鸦板效果