layui.flow流加载图标自定义——图文详解

 

layui 是一款采用自身模块规范编写的前端UI 框架,遵循原生HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其中有个Layui.flow 流加载是动态加载显示数据,可是使用的时候发现加载的动画只能在最后一列显示,为了满足客户让加载图标显示在屏幕中间的位置,下面是我进行的修改。

原Layui.flow流加载图:

img

来看一段官方的代码:

layui.use('flow', function(){

var $ = layui.jquery; //不用额外加载jQueryflow模块本身是有依赖jQuery的,直接用即可。

var flow = layui.flow;

flow.load({

elem: '#demo' //指定列表容器

,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页

var lis = [];	

//jQueryAjax请求为例,请求下一页数据(注意:page是从2开始返回)

$.get('/api/list?page='+page, function(res){

//假设你的列表返回在data集合中

layui.each(res.data, function(index, item){

lis.push('<li>'+ item.title +'</li>');

}); 

//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页

//pagesAjax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多

next(lis.join(''), page < res.pages); 

});

}

});

});

 

要注意:done那里就是动态加载的开始,所以如果要更改加载图标的话,在这里开始。

下面是我的实际项目:

因为我们更改不了它原来的图标,所以只能用hide()方法把原来的隐藏起来。并且把写好的图标.load_ing显示出来。加载完毕之后再隐藏。

img

效果图如下:

img

现在来说一下我用到动态加载动画,纯css控制。

因为记载的数据是在house_list容器里面,所以我们的图标也要放在id=”house_list”的div里面。

下面是动态加载图的html+css:

 

<div class="house-list" id="house_list">

<div class="load_ing">

<div class="spinner">

<div class="spinner-container container1">

<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>

<div class="spinner-container container2">

<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>

<div class="spinner-container container3">

<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>

</div>

</div>

</div>
 
<style>

    .load_ing{
        display: none;
        position: fixed;
        top: 0px; left: 0px ; right: 0px; bottom: 0px;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
    }

    .spinner {
        margin: 100px auto;
        width: 35px;
        height: 35px;
        position: relative;
    }

    .container1 > div, .container2 > div, .container3 > div {
        width: 10px;
        height: 10px;
        background-color: #ff585b;

        border-radius: 100%;
        position: absolute;
        -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
        animation: bouncedelay 1.2s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .spinner .spinner-container {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .container2 {
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
    }

    .container3 {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }

    .circle1 { top: 0; left: 0; }
    .circle2 { top: 0; right: 0; }
    .circle3 { right: 0; bottom: 0; }
    .circle4 { left: 0; bottom: 0; }

    .container2 .circle1 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .container3 .circle1 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .container1 .circle2 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .container2 .circle2 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    .container3 .circle2 {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }

    .container1 .circle3 {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }

    .container2 .circle3 {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }

    .container3 .circle3 {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }

    .container1 .circle4 {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }

    .container2 .circle4 {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }

    .container3 .circle4 {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }

    @-webkit-keyframes bouncedelay {
        0%, 80%, 100% { -webkit-transform: scale(0.0) }
        40% { -webkit-transform: scale(1.0) }
    }

    @keyframes bouncedelay {
        0%, 80%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        } 40% {
              transform: scale(1.0);
              -webkit-transform: scale(1.0);
          }
    }

</style>

最后的结果如图所示,就是预加载的图标中间显示,图标的样式也发生了改变,这是可以自定义的。不过这个是我php+html混合开发的时候使用的案例,感觉现在layui已经过时了。

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。