fastadmin ajax实现加载中样式
时间: 2024-12-08 21:16:18 浏览: 14
易企招聘fastadminH5+小程序.zip
FastAdmin是一个基于ThinkPHP5的后台管理系统模板,它利用Ajax实现了异步加载数据、提高页面响应速度的功能。当数据通过Ajax请求加载时,为了提供更好的用户体验,可以添加一个“加载中”(Loading)的动画或样式,通常会在用户触发数据请求时显示,数据加载完成后再隐藏。
在FastAdmin中,你可以这样做:
1. **CSS部分**:首先,在`public/static/css/admin.css`或其他自定义CSS文件中,创建一个加载状态的CSS样式,例如:
```css
#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5);
padding: 16px;
border-radius: 4px;
text-align: center;
}
```
2. **HTML部分**:在需要显示加载效果的地方,如列表、表格等,添加一个id为"loading"的元素,比如:
```html
<div id="loading" class="layui-layer-loading layui-layer-full">
<i class="layui-icon layui-icon-refresh/loading"></i>
正在加载...
</div>
```
3. **JavaScript部分**:在发起Ajax请求之前,显示加载样式,请求完成后隐藏:
```javascript
$.ajax({
url: 'your-url',
type: 'GET',
beforeSend: function() {
$('#loading').show();
},
success: function(data) {
// 更新内容并隐藏加载提示
$('#your-content').html(data);
$('#loading').hide();
},
error: function() {
// 错误处理
}
});
```
这样,当你在FastAdmin中进行数据异步加载时,就会有一个明显的加载中指示。
阅读全文