angular2项目里使用 Spin(加载中)

何时使用

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

效果

ng-zorro官方链接：https://ng.ant.design/components/spin/zh

上图是靠按钮来决定spin的显示与隐藏，但在我们项目里，却是要根据请求时间来决定spin的显示与隐藏,下面是我在项目里使用spin的过程

1、html引入

     //  nzTip="Loading 是自定义加载时的名字<nz-spin [nzSpinning]="isSpinning" nzTip="Loading..."> //  要包裹的代码</nz-spin>

2、ts逻辑

 public isSpinning: any = false;async ngOnInit() {this.loading = true;// 同步代码逻辑this.isSpinning = false;}

简单解释（大神略过）：
1、先用spin包裹要显示的内容，这部分内容是后台接口返回的数据，需要一定的时间去获取，这时就用spin来向用户反馈正在请求中（重点在需要时间，你要是用一段静态代码，那spin就没用了）
2、在逻辑层，要确保两点：一、在请求开始前打开spin，二、在请求结束后关闭spin
怎么才能确定请求结束了呢？------→ 保证一个或多个接口按同步方式执行（中间同步不同步无所谓），再把关闭spin代码放在最后

angular2项目里使用 Spin(加载中)相关推荐

使用Wireshark成功解决JavaWeb项目的页面一直加载中的问题
现象打开服务器页面 10.2.155.100,然后发现页面JS显示加载中..F12浏览器看起来像是发起css等静态资源时卡死.一时定位还以为时前端的问题. 解决过程上服务器抓包: tcpdu ...
Vue3加载中（Spin）
Vue2加载中(Spin) 可自定义设置以下属性: 是否为加载中状态(spinning),类型:boolean,默认 true 组件大小(size),类型:'small'|'default'|'lar ...
java中项目启动时加载_如何在项目启动时，加载或解析某配置文件
在web项目中有很多时候需要在项目启动时就执行一些方法,而且只需要执行一次,比如:加载解析自定义的配置文件.初始化数据库信息等等,在项目启动时就直接执行一些方法,可以减少很多繁琐的操作. 在工作中遇到 ...
Vue加载中（Spin）
可自定义传入以下属性: 是否为加载中状态(spinning),默认为true 描述文案(tip),默认为空效果图如下: ①创建Spin.vue组件: <template><div ...
vue 一直加载_vue加载中loading提示信息(iView Spin)
场景在一些按钮的点击操作中,假如没有限制,用户多次点击,会向后台发送多次请求. 还有一种情况是:当页面加载时,假如数据没有加载完成,此时为了防止用户进行操作,会显示一个遮罩:加载中....这个操作和 ...
JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
小程序showLoading：网络请求前显示“加载中...”，请求完成时关闭加载中
showLoading加载中提示框显示,以及消除提示框 wx.showLoading({title: '加载中...', })wx.request({url: '',success(res){},fa ...
正在加载中-js/jQuery功能实现
前言最近在springMVC中集成一个基于jsp报表工具,在集成之后的,由于报表运算量很大,SQL语句比较复杂,所以前台点击按钮触发以后,呆上几秒才有反应过来弹出报表框,所以想加入一个类似正在加载中 ...
activity中fragment 返回键不退出_优雅地处理加载中(loading)，重试(retry)和无数据(empty)等...
LoadSir是一个高效易用,低碳环保,扩展性良好的加载反馈页管理框架,在加载网络或其他数据时候,根据需求切换状态页面,可添加自定义状态页面,如加载中,加载失败,无数据,网络超时,占位图,登录失效等常 ...

angular2项目里使用 Spin(加载中)

何时使用

效果

1、html引入

2、ts逻辑

angular2项目里使用 Spin(加载中)相关推荐

最新文章

热门文章