Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

ionic2中页面加载loading效果的实现

Posted on 2017年4月16日2017年5月29日 by king2088

ionic是一个基于Angular、Cordova的一个开源框架,它提供了相关的UI库,ionic2中对ionic1进行了更多的优化,让ionic的运行速度,执行效率提高了不少。选择ionic开发web app是个不错的想法。下面就来说下ionic2中的loading效果的实现吧!本文使用TypeScript进行对ionic2的开发,如果不了解微软的TypeScript的,请自己google一下哦!

一、引入LoadingController

我们要使用LoadingController,就必须先引入它,直接使用下面的代码即可实现
import { LoadingController } from ‘ionic-angular’;
引入后,我们就需要在constructor中声明了,如下:
constructor(public loadingCtrl: LoadingController){
//……..在这里执行loading效果或者设置loading的图标、css等
}
看上去是很简单哦,要使用这个loading,那么我们得先创建它。
1、创建create()
直接可以使用create方法,create方法中又包括了以下几个属性:
spinner(设置loading的SVG图片)
content(设置loading的提示文字或内容)
loadingSpinner(这个我暂时没有理解到底是做什么的)

2、移除(也可以叫解雇)dismiss()
移除是当我们的loading完成后,自动移除当前loading,移除后,就无法再次在当前组件中使用它了。
加载指示器可以在特定时间后通过传递毫秒数来自动关闭,以duration在加载选项中显示它。默认情况下,加载指示器即使在页面更改期间也会显示,但可以通过设置dismissOnPageChange来禁用 true。要在创建后关闭加载指示器,请调用dismiss()“加载”实例上的方法。onDidDismiss可以调用该 功能,在加载指示灯关闭后执行动作。

二、使用LoadingController

1、默认UI的loading
constructor(public loadingCtrl: LoadingController) {

}

presentLoadingDefault() {
let loading = this.loadingCtrl.create({
content: 'Please wait...'//设置loading时显示的文字
});

loading.present();

setTimeout(() => {//设置loading的时间
loading.dismiss();
}, 5000);
}

2、自定义loading
你可以自己设置loading图片、文字
presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: `

//自定义loading图片(可以是svg或者gif)和div

`,
duration: 5000
});

loading.onDidDismiss(() => {
console.log('Dismissed loading');
});

loading.present();
}

这样就定义好一个属于自己的loading了,但是问题来了,你在loading的时候,总是有一层白色背景在你的loading图片后面,如下图:

如果是在IOS上,这样的效果很原生的,非常漂亮,但是如果你不想要这个白色的背景,那是可以通过修改scss变量来进行设置的。
首先我们打开theme文件夹下的variables.scss,给他设置如下变量,即可去除背景以及背景阴影了
$loading-md-background: none;
$loading-md-border-radius: 0;
$loading-md-box-shadow-color:rgba(158, 158, 158,0);
$loading-md-box-shadow:rgba(158, 158, 158,0);
$loading-ios-background: none;
$loading-ios-border-radius: 0;
$loading-wp-background: none;
$loading-wp-border-radius: 0;

一些你肯定用得到的参数及scss变量

create(opts)
Create a loading indicator. See below for options.

Param Type Details
opts LoadingOptions
Loading options
Returns: Loading
Returns a Loading Instance

Advanced

Loading options

Option Type Description
spinner string The name of the SVG spinner for the loading indicator.
content string The html content for the loading indicator.
cssClass string Additional classes for custom styles, separated by spaces.
showBackdrop boolean Whether to show the backdrop. Default true.
dismissOnPageChange boolean Whether to dismiss the indicator when navigating to a new page. Default false.
duration number How many milliseconds to wait before hiding the indicator. By default, it will show until dismiss() is called.

Sass Variables
iOS Material Design Windows Platform
Property Default Description
$loading-ios-padding 24px 34px
Padding of the loading wrapper
$loading-ios-max-width 270px
Max width of the loading wrapper
$loading-ios-max-height 90%
Maximum height of the loading wrapper
$loading-ios-border-radius 8px
Border radius of the loading wrapper
$loading-ios-text-color #000
Text color of the loading wrapper
$loading-ios-background #f8f8f8
Background of the loading wrapper
$loading-ios-content-font-weight bold
Font weight of the loading content
$loading-ios-spinner-color #69717d
Color of the loading spinner
$loading-ios-spinner-ios-color $loading-ios-spinner-color
Color of the ios loading spinner
$loading-ios-spinner-bubbles-color $loading-ios-spinner-color
Color of the bubbles loading spinner
$loading-ios-spinner-circles-color $loading-ios-spinner-color
Color of the circles loading spinner
$loading-ios-spinner-crescent-color $loading-ios-spinner-color
Color of the crescent loading spinner
$loading-ios-spinner-dots-color $loading-ios-spinner-color
Color of the dots loading spinner

更多可以查看官方文档:http://ionicframework.com/docs/api/components/loading/LoadingController/

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme