前端开发,使用的是layui框架。异步装载数据时,使用layui的loading加载层展示装载效果。而layui默认的loading加载层常用的是切换图标,如下:
layui.use(['layer'], function () {
layer = layui.layer;
// loading
layer.load(2, {
time: 2000
})
})
效果如下图:
如果给content属性赋值文本,显示效果如下:
可以看到图标和内容文本重叠到一起了,这时,我们可以通过以下代码将图标和内容文本分开:
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)
})
通过上面的代码,可以看出,主要是在 success 回调方法中,重新设置 content 的样式,让图标和内容文本错开,效果如下:
另外,我们也可以通过 layer.msg() 方法实现类似的效果,代码如下:
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)
})
效果图如下: