ionic3 + 实用
时间:2022-06-15
本文章向大家介绍ionic3 + 实用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
二级页面隐藏tabbar
app.module.ts内 @NgModule 下
@NgModule({
imports: [
IonicModule.forRoot(MyApp, {
tabsHideOnSubPages: 'true', // 二级页面隐藏tabbar
}
]
})
特定页面隐藏tabbar
在指定页面的ts 文件内 非.module.ts文件
ionViewWillEnter() {
//进入界面资源还没有加载完成时,设置隐藏下面的tabbar
var tabs = document.getElementsByClassName('tabbar').item(0);
tabs['style'].display = 'none';
}
//离开页面的时候,设置显示下面的tabbar
ionViewWillLeave(){
var tabs = document.getElementsByClassName('tabbar').item(0);
tabs['style'].display = 'flex';
}
ionic 创建页面
ionic g page newPage
ionic 跳转懒加载页面
原跳转方式
this.navCtrl.push(LoginPage)
懒加载跳转方式
this.navCtrl.push('LoginPage')
ionic 跳转页面loading加载 封装
编写插件,代码如下:
import { Injectable } from "@angular/core"
import { LoadingController } from "ionic-angular"
@Injectable()
export class LoadingProvider {
constructor(
public loadingCtrl: LoadingController
) {}
loading: any
// 显示loading
show() {
this.loading = this.loadingCtrl.create({
content: "努力加载中..."
})
this.loading.present()
}
// 隐藏loading
hide() {
if (this.loading) {
this.loading.dismiss()
}
}
}
使用: 在页面的.ts文件引入
import { LoadingProvider } from "../../providers/loading/loading";
注入(此处仅展示 LoadingProvider 的注入)
constructor(public loading: LoadingProvider) {}
使用:在页面进入时hide,在页面离开时show
ionViewWillEnter(){
this.loading.hide()
}
ionViewWillLeave () {
this.loading.show()
}
同时也可以在请求时进行loading加载等待,贼6
- Golang记录、计算函数执行耗时、运行时间的一个简单方法
- uva----11729 Commando war (突击战争)
- uva-----11292 The Dragon of Loowater
- golang简单位运算示例
- 学编程,学单词.....在学习中积累自己的单词(不断更新__ing)
- 初学java之事件响应(结合接口来设置在同一个界面上!)
- 初学java之触发响应事件举例子
- 初学java之(盒子分布)
- java(课程设计之记事本界面部分代码公布)
- HDUOJ---1236 排名(浙大考研题)
- HDUOJ----1234 开门人和关门人(浙江大学考研题)
- HDUOJ----2571(命运)(简单动态规划)
- 初学java之面板布局的控制
- 初学java之常用组件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在群晖docker上构建私有云IDE和devops构建链
- 小白学PyTorch | 14 tensorboardX可视化教程
- Apache Solr 漏洞复现
- Elasticsearch rollover API
- 重发和重定向有什么区别与重定向应用
- 为tinycolinux制作应用包
- CrossC2的2.0版本
- 使用OpenCV和Python计算图像的“色彩”
- 为tinycolinux创建应用包-toolchain和编译方法
- [译]在Solidity中如何优化Gas第一部分:变量
- [译]Solidity 0.7.0 新变化
- 两个数组的交集 II
- 常说的手机刷新率60Hz、120Hz有什么不同?
- Istio 运维实战系列(3):让人头大的『无头服务』-下
- java安全编码指南之:可见性和原子性