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

【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>