/* ---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的更多相关文章

  1. jQuery8种不同的瀑布流懒加载loading效果

    优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...

  2. 一个很酷的加载loading效果--IT蓝豹

    一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...

  3. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  4. 简易仿ios菊花加载loading图

    原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...

  5. php+ajax实现登录按钮加载loading效果

    php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...

  6. react 首页加载loading

    首页加载loading,放在#root里面,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  7. React Native封装Toast与加载Loading组件

    React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...

  8. vue axios配置 发起请求加载loading请求结束关闭loading

    axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...

  9. 谈谈加载(Loading)的那点事

    谈谈加载(Loading)的那点事 2013/10/12 | 分类: 设计 | 0 条评论 | 标签: 交互设计, 加载 分享到:33 原文出处: 搜狐焦点 对于加载(loading),想必大家都不陌 ...

  10. 基于jQuery的图片加载loading效果插件

    基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...

随机推荐

  1. 灯塔AOI简易实现

    首先我们来讨论下游戏开发中的几个坐标系,为了方便解释,我截取了灯塔AOI DEMO当NPC数目为0时候的样子(代码地址觉得有帮助的童鞋记得给我代码点个星^_^) 先对这张图简单说明下: 蓝色的坐标轴表 ...

  2. 864. Shortest Path to Get All Keys

    We are given a 2-dimensional grid. "." is an empty cell, "#" is a wall, "@& ...

  3. centos7 yum安装配置redis

    1.设置Redis的仓库地址 yum install epel-release 2.安装redis yum install redis 修改配置文件,监听所有的IP地址 vim /etc/redis. ...

  4. 【spring cloud】并发测试问题

    一,问题 并发测试,对外接口测试50个并发的时候开发报错,报错信息类似如下:  {"status":"0500","message":&qu ...

  5. Jenkins持续集成企业实战系列之Jenkins手动构建-----04

    注:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.    最初接触Jenkins也是由于公司需求,根据公司需求Java代码项目升级的.(公司是 ...

  6. 包括ES6在内的数组操作(待更)

    下面是我对ES6和古老的JS(ES3)一些数组操作的总结,附带了一些我曾经用上的. map处有待更内容. 贴一下有借鉴的网站:https://segmentfault.com/a/1190000002 ...

  7. windows 下 redis 安装

    百度下载 windows 版本 的 redis... 解压 安装为windows服务 安装命令: redis-server.exe --service-install redis.windows.co ...

  8. vue数据双向绑定的原理、虚拟dom的原理

    vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...

  9. liunx php-fpm

    查看php-fpm 相关信息 查看php-fpm是否开启 :ps -ef|grep php 查看php-fpm的位置:whereis php-fpm 查看php-fpm进程数:ps aux | gre ...

  10. Windows10 下安装配置IIS + MySQL5.7.19 + nginx1.12.1 + php7.1.7

    环境: VMWare Workstation Player12 Windows10 Pro x64 一.安装系统 vmware 会采用 fast install 方式很快装完,无需配置什么. 二.配置 ...