【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>
推荐阅读
- 微信web开发者工具启动不了打不开——已解决
- uni-app vue框架组件添加使用及注意事项
- C语言简明教程(十一)(函数和指针)
- 游戏介绍 – XCOM(Chimera Squad)
- Xbox Series X和PS5发布标题缓解了一天一台游戏机购买的压力
- Xbox Head Phil Spencer重新致力于单人游戏,并获得更多工作室收购
- Xbox游戏金牌公开赛2020年11月免费
- Xbox Game Pass(这是十月份的最新消息)
- Xbox Game Pass将更多游戏添加到控制台,PC和移动设备