layui加载数据显示loading加载完成loading消失的实例
今天,长沙网络推广带来一篇关于layui加载数据显示loading,并在加载完成后消失实例代码的分享。对于需要在后台请求数据,且等待时间较长的情况,展示一个loading转圈圈是非常友好的用户体验设计。现在,我们来看看在layui中如何实现这一功能。
引入layui的css和js文件:
```html
```
然后,通过layui的use方法,引入table和layer两个模块:
```javascript
layui.use(['table','layer'], function(){
var table = layui.table;
var layer = layui.layer;
var index = layer.load(1); //添加loading,这里使用默认样式即可
```
```javascript
table.render({
elem: 'userTable', //绑定元素的id
method: 'POST', //请求方式
loading: true, //开启加载动画提示,翻页时也将显示加载动画
url: weburl, //数据接口地址
request:{ //请求参数配置
pageName: 'pageIndex', //页码参数名称,默认为'page'
limitName: 'pageSize' //每页数据量参数名称,默认为'limit'
},
where:{ //额外的请求参数配置,这里假设有一个邀请用户id的参数invite_uid
invite_uid: invite_uid
},
response:{ //定义后端返回的数据格式,按照实际需求填写即可
statusName: 'status', //数据状态字段名称,默认为'code'字段接收状态码信息
```
编程语言
- Win10 PC创意者更新慢速版15048改进内容与已知问题
- 用纯CSS3实现网页中常见的小箭头
- 神舟笔记本问题集锦
- Bellnames常用操作说明
- 揭秘手机淘宝搜索排序的影响因素
- XHTML入门学习教程-网页Head和DTD
- 笔记本光驱保养常用知识
- hzhost虚拟主机系统致命漏洞
- 电脑无线网络出现红色叉叉无线网卡打不开的六
- 16项评比不得不看 机箱哪些功能最实用
- AI怎么绘制一个呲牙的qq表情-
- 红帽指点杆机械键盘 TEX Yoda上手体验测评
- 笔记本电脑保养常识有哪些-笔记本保养常识总结
- cdr怎么设计圆角矩形效果的图标-
- 在XSLT样式表中声明命名空间小结
- Fireworks教程-常用操作技巧总结