layui加载数据显⽰loading加载完成loading消失的实例代
码
项⽬中，向后台请求数据，经常会出现较长的等待时间，这时我们需要⼀个loading转圈圈，接收到后台的数据时，让loading 消失
这layui中使⽤⽅法如下：以表格为例，每次加载表格数据时加⼀个loading
<link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow" />
<script type="text/javascript" src="../layui/layui.js"></script>
<script>
layui.use(['table','layer'], function(){
var table = layui.table;
var layer = layui.layer;
var index = layer.load(1); //添加laoding,0-2两种⽅式
//第⼀个实例
elem: '#userTable',
height: 515,
method: 'POST', //⽅式
loading: true, //翻页加loading
url: weburl, //数据接⼝
request:{
pageName: 'pageIndex',//页码的参数名称，默认：page
limitName: 'pageSize' //每页数据量的参数名，默认：limit
},
where:{
invite_uid:invite_uid //额外参数
},
js实现轮播图最简代码response:{
statusName: 'status', //数据状态的字段名称，默认：code
statusCode: 1,//成功的状态码，默认：0
msgName: 'msg' ,//状态信息的字段名称，默认：msg
countName: 'count', //数据总数的字段名称，默认：count
dataName: 'data' //数据列表的字段名称，默认：data
},
cols: [[ //表头
{type:'numbers',title: '序号', fixed: 'left'},
{field: 'u_id', title: '会员id',width:80, fixed: 'left'},
{field: 'u_nickname', title: '会员昵称',width:150},
{field: 'proxy_level', title: '代理级别',width:100},
{field: 'u_goldcnt', title: '拥有⾦币',width:150},
{field: 'today_ubk_balance', title: '今⽇总输赢',width:150},
{field: 'today_tb_balance', title: '今⽇返还⾦额',width:150},
{field: 'sum_ubk_balance', title: '历史总输赢',width:150},
{field: 'sum_tb_balance', title: '历史返还⾦额',width:150}
]],
limit: 10,
limits: [10, 20, 30, 40, 50] ,
page:{
groups: 5 //只显⽰ 5 个连续页码
},
done:function (res) {  //返回数据执⾏回调函数
layer.close(index);  //返回数据关闭loading
}
});
});
</script>
以上这篇layui加载数据显⽰loading加载完成loading消失的实例代码就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。