精华内容
下载资源
问答
  • layui流加载

    2020-04-16 09:53:02
    layui流加载 html指定一个容器 <div class="top" id="top" style="display:none">返回頂部</div> <ul id="demo"> </ul> javascript layui.use('flow', function(){ var $ = ...

    layui流加载

    1. html指定一个容器

      <div class="top" id="top" style="display:none">返回頂部</div>
              <ul id="demo">
      		</ul>
      
    2. 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(); //图片懒加载
          	});
      
    3. 返回顶部

      $(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:16
    layui流加载
  • layui 流加载

    千次阅读 2018-06-04 10:11:40
    {:C('LAYUI2')}css/layui.css?version={:C('VERSION')}" rel="stylesheet" type="text/css" /&gt;&lt;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>
    第三步js
     var 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 流加载实现功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 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;
    	}
    }

    页面加载效果如下:

    加载完成后:

    展开全文
  • //不用额外加载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');

    ?>

    展开全文
  • htmljs,要引入layui.jslayui.use('flow', function() {...flow.load({elem: '#container' //流加载容器//滚动条所在元素,一般不用填,此处只是演示需要。,done: function(page, next){ //执行下一页的回调console....
  • layui 流加载筛选数据不显示 可以这么做 <div class="commodity"> <ul id="LAY_demo1"> </ul> </div> function getdata(status=1){ //关键代码 把容器下的div移除掉就行了 $...
  • layui流加载模块自定义【加载更多】 首先看看是引用的哪个,如果是这个layui.all.js,那就找到这个文件。 <script src="/static/common/layui-v2.5.6/layui.all.js " media="all "></script> 然后找到...
  • LayUI流加载的官方文档地址 首先下载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
    前端 &amp;lt;ul id=&quot;flow_list&quot;&amp;gt; &amp;... layui.use(['laypage', 'jquery', 'layer','flow'], function() { layui.flow.load({ elem: '#flow_list'
  • 信息即异步逐页渲染列表元素,这是你页面已经存在的一段列表,你页面初始时只显示了6个12……6你想通过加载更多来显示余下列表,那么你只需要执行方法:flow.load(options) 即可layui.use('flow', function(){var ...
  • layui流加载+搜索 示例

    2020-09-18 10:35:48
    div 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-...
  • ...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
    &lt;div class="flow-default" id="handle_demo"...--此id为流加载应用范围标识--&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;id&lt;/th&gt; &am
  • &lt;script type="text/javascript"&gt; layui.use('flow', function(){ ... elem: '#dianhua' //流加载容器 ,scrollElem: '#dianhua' //滚动条所在元素,一般不用填,此处只是演示需要...
  • 返回顶部 //两个按钮的代码 <div class="isFloat"> <p id="count" class="p11" style=...//未加载条数 <p class="p11" style="margin-left: 3px;">未加载</p>//返回顶部 </div> //cs
  • 2、然后用另一个ajax进行数据流加载: <script> var pageSize = 10; var pageIndex = 0; layui.use('flow', function () { var $ = layui.jquery; var flow = layui.flow; flow.load({ elem: '#...
  • 1、先看看bug长啥样 这里html显示的是语法错误,那就是前台layui的使用不当造成的 2、解决 图1 图2 ...不要使用图1 的方式加载数据,使用图2的方式。至于为什么,有待考虑。 =.=不想打字了… ...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 137
精华内容 54
关键字:

layui流加载