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

    2020-04-15 10:43:16
    layui流加载
  • 主要介绍了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;
    	}
    }

    页面加载效果如下:

    加载完成后:

    展开全文
  • 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-...

    这是开发小白的一篇记录,希望能给跟我一样的小白带来一点灵感哈哈。

    这是HTML代码:

    <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-btn layui-btn-sm" id="txtSearch"><i class="layui-icon layui-icon-search"> </i></button>
    </div>
    
    <div class="layui-card-body">
    	<ul class="flow-default article_list " id="LAY_demo1">
    	</ul>
    </div>

    这是JS代码:

     <script>
      layui.use(['element', 'flow', 'util'], function () {
      var carousel = layui.carousel
      , element = layui.element
      , util = layui.util;
      var title = $("#title_cen").val();
      //流加载
      var flow = layui.flow; 
      
      flowload();
      
      //搜索
      $("#txtSearch").click(function () {
        title = $("#title_cen").val();
        $("#LAY_demo1").html("");
        flowload();
      })
      
      function flowload() {
         flow.load({
         elem: '#LAY_demo1' //流加载容器
         , done: function (page, next) { //执行下一页的回调
         var info = { pageIndex: page, title: title }
         $.ajax({
            url: "/NewsList/GetViewNewsForFlowLoad",
            type: "post",
            data: JSON.stringify(info),
            contentType: "application/json",
            success: function (data) {
              var json = JSON.parse(data);
              var html = [];
              if (json.Err == 0) {
                html.push(json.Msg);
                next(html.join(''), page < json.Data);
              } else {
                layer.msg(json.Msg, {
                icon: 2,
                time: 4000
                })
              }
            }, error: function (xhr) {
              layer.msg(xhr.responseText, {
               icon: 2,
               time: 4000
              })
            }
          });//ajax结束
        }
      });
     }
    });
    </script>
    展开全文
  • 通过使用第三方开放组件layui中的流加载,信息流加载和图片懒加载两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了。
  • 今天小编就为大家分享一篇layui 实现加载动画以及非真实加载进度的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui流加载模块自定义【加载更多】 首先看看是引用的哪个,如果是这个layui.all.js,那就找到这个文件。 <script src="/static/common/layui-v2.5.6/layui.all.js " media="all "></script> 然后找到...

    layui流加载模块自定义【加载更多】

    首先看看是引用的哪个,如果是这个layui.all.js,那就找到这个文件。

    <script src="/static/common/layui-v2.5.6/layui.all.js " media="all "></script>
    

    在这里插入图片描述
    然后找到一段代码,加上那段style就可以。

    d="<cite>加载更多。。。</cite>",h=l('<div class="layui-flow-more"  style="clear:both;position:relation;margin-top:30px;padding-top:50px;margin-bottom:30px"><a href="javascript:;">'+d+"</a></div>");
    

    效果如下:
    在这里插入图片描述
    其他正常。
    在这里插入图片描述

    展开全文
  • LayUI流加载的官方文档地址 首先下载layui的架包 把下载好架包的文件取出,放入到项目中,我这里使用的是idea 3.在HTML页面中定义一个存放加载内容的标签 <%@ page contentType="text/html;charset=UTF-8" ...

    LayUI流加载的官方文档地址

    1. 首先下载layui的架包点击立即下载
    2. 把下载好架包的文件取出,放入到项目中,我这里使用的是idea

    在这里插入图片描述
    在这里插入图片描述

    3.在HTML页面中定义一个存放加载内容的标签

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%
        String path = request.getContextPath();
    %>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="kiben" content="no-cache">
    <html>
    <head>
        <title>${select.stitle}</title>
        <link rel="stylesheet" href="<%=path%>/statics/css/readBook.css">
    </head>
    <body>
    
    
    <div id="content">
        <h4>${select.stitle}</h4>
        <p id="p">
            ${select.scontent}
        </p>
    </div>
    
    <link rel="stylesheet" href="<%=path%>/statics/layui/css/layui.css"/>
    <script src="<%=path%>/statics/layui/layui.js"></script>
    <script src="<%=path%>/statics/js/jquery-1.12.4.min.js"></script>
    <script>
        layui.use('flow', function(){
            var flow = layui.flow;
    
            flow.load({
                elem: '#content' //流加载容器
                ,mb:50
                ,done: function(page, next){ //执行下一页的回调
                    var lis = [];
    
                    //以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回)
                    $.get('<%=path%>/select/findSelectContent/'+page+'/'+${bid}, function(res){
                        //假设你的列表返回在data集合中
                        layui.each(res.list, function(index, item){
                            lis.push("<h4>"+ item.stitle +"</h4><hr>"+
                            "<p id='p'>"+item.scontent+"</p><hr>");
                        });
    
                        //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
                        //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
                        next(lis.join(''), page < res.total);
                    });
                }
            });
    
        });
    </script>
    <script src="<%=path%>/statics/js/readBook.js"></script>
    </body>
    </html>
    
    

    后台代码

    @RequestMapping("/findSelectContent/{page}/{bid}")
        public @ResponseBody PageInfo<Select> findSelectContent(@PathVariable Integer page,@PathVariable Integer bid){
            PageHelper.startPage(page, 1);
            PageInfo<Select> pageInfo=new PageInfo<Select>(selectService.getFindSeArticleById(bid));
            return pageInfo;
        }
    

    效果图如下

    在这里插入图片描述
    以上就是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....
  • layui 流加载筛选数据不显示 可以这么做 <div class="commodity"> <ul id="LAY_demo1"> </ul> </div> function getdata(status=1){ //关键代码 把容器下的div移除掉就行了 $...
  • 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 $ = ...
  • PHP+LayUI 流加载详细用法跨坑记录。

    千次阅读 2018-09-01 09:32:35
    这里是html: &lt;div&gt; &lt;ul id="demo"...这里是layui的javascript:  //记得先引用layui.js //&lt;script type="text/javascript" src="/static/pl
  • 2、然后用另一个ajax进行数据流加载: <script> var pageSize = 10; var pageIndex = 0; layui.use('flow', function () { var $ = layui.jquery; var flow = layui.flow; flow.load({ elem: '#...
  • 返回顶部 //两个按钮的代码 <div class="isFloat"> <p id="count" class="p11" style=...//未加载条数 <p class="p11" style="margin-left: 3px;">未加载</p>//返回顶部 </div> //cs
  • 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
  • 思路是当点击事件触发时,把ul移除,绑定的事件移除,重新加载ul,相当于把之前的删除重新加载了flow.load。
  • 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; //不...
  • 测试过程中遇到bug了,重新点刷新后的流加载分页的页码会混乱,解决办法如下: 1.将layui.use中绑定的容器先remove()一下 2.将容器重新append()进去 参考链接:...
  • ...div class="layui-container" id="container"> </div> js,要引入layui.js layui.use('flow', function() { var $ = layui.jquery; var flow = layui.flow; flow.lo...
  • layui流加载

    千次阅读 2019-09-19 20:17:27
    layui流加载 html 添加内容 <div class="model-list"> <ul id="LAY_demo1" style="width: 100%; height: 650px; overflow: auto;"></ul> </div> <!--overflow: auto 浏览器会显示滚动...
  • 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
  • layui信息加载流的方式加载数据

    千次阅读 2019-12-10 14:20:57
    layui信息加载流的方式加载数据
  • java+layui实现流加载

    千次阅读 2019-02-20 08:37:29
    我们需要引入jquery和layui使用的依赖js, layui官网:https://www.layui.com/ 引入依赖文件 &lt;script src="js/layui/layui.js" type="text/javascript" charset="utf-8"&...
  • layui - 流加载

    2020-12-07 16:08:07
    模块:layui.use( 'flow', function(){ var flow=layui.flow;} ) 核心方法: layui.use( 'flow', function(){ ... /*图片懒加载*/ } ) 参考:https://www.layui.com/doc/modules/flow.html 信息: 信息即...
  • layui.use('flow', function(){ ... elem: '#LAY_demo1' //流加载容器 ,scrollElem: '#LAY_demo1' //滚动条所在元素,一般不用填,此处只是演示需要。 ,done: function(page, next){ //执行下一页的回调...
  • 今天要讲的是一个来自layui插件的功能,图片流加载中的手工加载,当然除了手工加载以外还有滚动加载。这里主要就只讲一下手工加载。图片流加载就像我们浏览网页的时候,滚动条拉到最底的时候,你浏览的内容还没有完...
  • // 流加载 flow.load({ elem: '#dataView' ,mb: 50 ,done: function (page, next){ //到达临界点(默认滚动触发),触发下一页 data.page = page; data.limit = 5; data.user = ...
  • layui加载流java实现

    2019-07-14 11:01:47
    效果图: 导入layui的css和js文件...link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all"> <script src="${pageContext.request.contextPath}/layui/layui.j...
  • layui 实现流加载

    2020-11-25 09:44:21
    layui 实现流加载 <div class="flow-default yuyue_list" id="LAY_demo1" > <div class="main-right-ziti"> <a href=""> <div class="tu"> <img src=""> </div>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 976
精华内容 390
关键字:

layui流加载