layui.flow流加载图标和样式的修改案例

Layui.flow 流加载是动态加载显示数据，可是使用的时候发现加载的动画只能在最后一列显示，为了满足客户的需求——看到动画的效果，我们需要把动画搬到中间来，可是查看了文档，并没有发现这一设置。怎么办呢？

来看一段官方的代码：

layui.use('flow', function(){
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
flow.load({
elem: '#demo' //指定列表容器
,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
var lis = [];
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
$.get('/api/list?page='+page, function(res){
//假设你的列表返回在data集合中
layui.each(res.data, function(index, item){
lis.push('<li>'+ item.title +'</li>');
}); 
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < res.pages); 
});
}
});
});

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

下面是我的实际项目：

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

效果图如下：

现在来说一下我用到动态加载动画，纯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>