4、加载:Loading
/* ---html----*/ <ion-content> <button (click)="manual()">手动关闭</button>
<button (click)="automatic()">自动关闭</button> </ion-content> /* ---html----*/
/* ---js----*/
import { Page , Loading , NavController } from 'ionic-angular';
@Page({
templateUrl: 'build/pages/tabs/tabs.html',
})
export class TabsPage {
static get parameters() {
return [[NavController]];
}
constructor(nav) {
this.nav = nav;
}
manual() {
let loading = Loading.create({
content: "Please wait...",
spinner: 'ios-small',
});
this.nav.present(loading);
setTimeout(() => {
loading.dismiss();
console.log('我没有设置duration属性。我是手动关闭的。')
},1000)
}
automatic(){
let loading = Loading.create({
content: "Please wait...",
spinner: 'ios-small',
duration:1000
});
this.nav.present(loading);
loading.onDismiss(()=>{
console.log('我是自动关闭的。')
});
}
}
// loading设置参数
// 1、content:内容,可以是html语句
// 2、duration:持续时间 ,当时间走完的时候 去走dismiss()方法。也就是Loading.create的标识符中的方法
// 3、showBackdrop:是否显示背景层
// 4、spinner:loading图标的可选svg ios、dots、bubbles、circles、ios-small、crescent hide,hide则是不显示图标
// 5、cssClass:自定义风格
// 6、dismissOnPageChange:是否在导航到新的页面时忽略该指标 默认:不忽略,这个方法就是说 本view跳转到别的view时 此loading还生效不生效
// !注意手动关闭和自动关闭的方法名不一样的。
/* ---js----*/

4、加载:Loading的更多相关文章
- jQuery8种不同的瀑布流懒加载loading效果
优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果 在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...
- 一个很酷的加载loading效果--IT蓝豹
一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 简易仿ios菊花加载loading图
原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...
- php+ajax实现登录按钮加载loading效果
php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...
- react 首页加载loading
首页加载loading,放在#root里面,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- vue axios配置 发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
- 谈谈加载(Loading)的那点事
谈谈加载(Loading)的那点事 2013/10/12 | 分类: 设计 | 0 条评论 | 标签: 交互设计, 加载 分享到:33 原文出处: 搜狐焦点 对于加载(loading),想必大家都不陌 ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
随机推荐
- 灯塔AOI简易实现
首先我们来讨论下游戏开发中的几个坐标系,为了方便解释,我截取了灯塔AOI DEMO当NPC数目为0时候的样子(代码地址觉得有帮助的童鞋记得给我代码点个星^_^) 先对这张图简单说明下: 蓝色的坐标轴表 ...
- 864. Shortest Path to Get All Keys
We are given a 2-dimensional grid. "." is an empty cell, "#" is a wall, "@& ...
- centos7 yum安装配置redis
1.设置Redis的仓库地址 yum install epel-release 2.安装redis yum install redis 修改配置文件,监听所有的IP地址 vim /etc/redis. ...
- 【spring cloud】并发测试问题
一,问题 并发测试,对外接口测试50个并发的时候开发报错,报错信息类似如下: {"status":"0500","message":&qu ...
- Jenkins持续集成企业实战系列之Jenkins手动构建-----04
注:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. 最初接触Jenkins也是由于公司需求,根据公司需求Java代码项目升级的.(公司是 ...
- 包括ES6在内的数组操作(待更)
下面是我对ES6和古老的JS(ES3)一些数组操作的总结,附带了一些我曾经用上的. map处有待更内容. 贴一下有借鉴的网站:https://segmentfault.com/a/1190000002 ...
- windows 下 redis 安装
百度下载 windows 版本 的 redis... 解压 安装为windows服务 安装命令: redis-server.exe --service-install redis.windows.co ...
- vue数据双向绑定的原理、虚拟dom的原理
vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...
- liunx php-fpm
查看php-fpm 相关信息 查看php-fpm是否开启 :ps -ef|grep php 查看php-fpm的位置:whereis php-fpm 查看php-fpm进程数:ps aux | gre ...
- Windows10 下安装配置IIS + MySQL5.7.19 + nginx1.12.1 + php7.1.7
环境: VMWare Workstation Player12 Windows10 Pro x64 一.安装系统 vmware 会采用 fast install 方式很快装完,无需配置什么. 二.配置 ...