前端开发,使用的是layui框架。异步装载数据时,使用layui的loading加载层展示装载效果。而layui默认的loading加载层常用的是切换图标,如下:
<script> layui.use(['layer'], function () { layer = layui.layer; // loading layer.load(2, { time: 2000 }) }) </script>
效果如下图:
如果给content属性赋值文本,显示效果如下:
可以看到图标和内容文本重叠到一起了,这时,我们可以通过以下代码将图标和内容文本分开:
<script> layui.use(['layer'], function () { layer = layui.layer; var loading = layer.load(2, { // icon0-2 加载中,页面显示不同样式 shade: [0.4, '#000'], // 0.4为透明度 ,#000 为颜色 content: '我是loading', success: function (obj) { obj.find('.layui-layer-content').css({ 'color': 'white', 'padding-top': '40px', // 图标与样式会重合,这样设置可以错开 'width': '200px' // 文字显示的宽度 }); } }); setTimeout(function () { layer.close(loading) }, 3000) }) </script>
通过上面的代码,可以看出,主要是在 success 回调方法中,重新设置 content 的样式,让图标和内容文本错开,效果如下:
另外,我们也可以通过 layer.msg() 方法实现类似的效果,代码如下:
<script> layui.use(['layer'], function () { layer = layui.layer; // var loading = layer.load(2, { // icon0-2 加载中,页面显示不同样式 // shade: [0.4, '#000'], // 0.4为透明度 ,#000 为颜色 // content: '我是loading', // success: function (obj) { // obj.find('.layui-layer-content').css({ // 'color': 'white', // 'padding-top': '40px', // 图标与样式会重合,这样设置可以错开 // 'width': '200px' // 文字显示的宽度 // }); // } // }); // 使用msg显示loading var loading = layer.msg('我是loading', { icon: 16, shade: [0.1, '#000'], time: false // 取消自动关闭 }); setTimeout(function () { layer.close(loading) }, 3000) }) </script>
效果图如下: