ionic 生命周期
- ionViewDidLoad : 当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发
- ionViewWillEnter : 当将要进入页面时触发
- ionViewDidEnter: 当已经进入页面时触发
- ionViewWillLeave : 当将要离开页面时触发
- ionViewDidLeave : 离开页面时触发
- ionViewWillUnload : 当页面将要销毁同时页面上元素移除时触发
自定义插件调用时, 如果报线程警告:
THREAD WARNING: ['UdeskPlugin'] took '290.006104' ms. Plugin should use a background thread.
那么需要将原生里改为:
- (void)uDeskMethod:(CDVInvokedUrlCommand*)command {
[self.commandDelegate runInBackground:^{
dispatch_async(dispatch_get_main_queue(), ^{
});
}];
}
获取组件内封装的标签,如<ion-content>中封装的<scroll-content>,将其设置禁止滚动
```
<ion-content #ionContent id="aboutContent" ></ion-content>
方法一:
/// querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素。
let aboutContent = document.querySelector("#aboutContent");
let scroll: any = aboutContent.querySelector(".scroll-content");
scroll.style.overflow = 'hidden'
方法二:
// @ViewChild(Content) content: Content; 这也可以
@ViewChild('ionContent') content
// 可以通过打印 content 看到里面属性及方法
this.content._scrollContent.nativeElement.style.overflow = 'hidden'
两种隐藏内容且不占空间的方法:
```
*ngIf : 彻底从页面中删除, 若页面其它地方有引用则会报错;
display: none : 从页面中隐藏, 若页面中其它地方要引用则用它;
```
JS中 on 开头的方法, 都可以用 () 来表示 : 如: on-click => (click); on-input => (input);
image.png
轮播图的自动滚动及Item 无法点击的问题:
<!-- HTLM -->
<div class="remindContent">
<!-- *ngIf="remindData && remindData.length >= 1": 这个必须要加,不然会报莫名的错误 -->
<!-- 其中的属性去看官方文档 -->
<ion-slides id="ionSlide" #ionSlides direction="vertical" effect="slide" autoplay="3000" speed="2000" loop="true"
*ngIf="remindData && remindData.length >= 1" (ionSlideTap)="ionSlideTapMethod()">
<ion-slide *ngFor="let item of remindData" >
<div>
<custom-img name="home_notification" width="10" height="12"></custom-img>
<span>{{item.warnInfo}}</span>
</div>
</ion-slide>
</ion-slides>
<div *ngIf="!remindData || remindData.length === 0">{{remindText}}</div>
</div>
<!-- ts文件 -->
<!-- item的点击方法, this.slides.realIndex 可以获取当前显示的item的下标 -->
ionSlideTapMethod() {
let slideIndex = this.slides.realIndex;
this.warningOrderItem(this.remindData[slideIndex]);
}
<!-- 跳转离开页面再返回时, 自动轮播失败的解决方法 -->
@ViewChild(Slides) slides: Slides;
<!-- 进入页面开始滚动 -->
ionViewDidEnter() {
if (this.slides) {
this.slides.startAutoplay();
}
}
<!-- 离开页面停止滚动 -->
ionViewWillLeave() {
if (this.slides) {
this.slides.stopAutoplay();
}
}
form表单的使用:
/**
* 要求: 每个<ion-input> 必须取个 name ; 必须加 required; <button>必须写在form表单内; 注意[disabled]的使用;
*/
<form action="" #signForm="ngForm" *ngIf="!selectBinding">
<ion-grid>
<ion-row>
<ion-col col-3>
<ion-label>支行</ion-label>
</ion-col>
<ion-col>
<ion-input name="subBranchName" required placeholder="请输入" [(ngModel)]="bankModal.subBranchName"></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-3>
<ion-label>持卡人</ion-label>
</ion-col>
<ion-col>
<ion-input name="accountName" required placeholder="请输入"[(ngModel)]="bankModal.accountName"></ion-input>
</ion-col>
</ion-row>
</ion-grid>
<button ion-button type="submit" [disabled]="signForm.invalid || !bank" tappable
(click)="buttonClick()" class="confirmButton">确定修改
</button>
</form>
input标签自动获取焦点: autofocus="autofocus" , 监听键盘及隐藏( https://ionicframework.com/docs/api/platform/Keyboard/);
<!-- 官方文档里有很多键盘的方法 -->
import {Keyboard} from 'ionic-angular';
constructor(public keyboard: Keyboard) {}
this.keyboard.close(); // 键盘隐藏;
input输入框内容变化实时监听
onchange事件:
此事件会在元素内容发生改变，且失去焦点的时候触发。浏览器支持度较好。
onpropertychange事件:
此事件会在元素内容发生改变时立即触发，即便是通过js改变的内容也会触发此事件。元素的任何属性改变都会触发该事件，不止是value。只有IE11以下浏览器支持此事件。
oninput事件:
此事件会在value属性值发生改变时触发，通过js改变value属性值不会触发此事件。只有IE8以上或者谷歌火狐等标准浏览器支持。
<ion-input type="text" placeholder="请输入" [(ngModel)]="identifyCode" (change)="valueChange() name="input"></ion-input>
导航栏后退返回到指定页面:
image.png
数据的双向绑定, 获取 input 标签里的值
<!-- [abnormalType]: 属性绑定; (filterConfirmBtn): 方法绑定; [(filterCondition)]: 双向绑定; -->
<filter-content [abnormalType]="bigType" (filterConfirmBtn)="filterConfirmBtnClick()" [(filterCondition)]="filterConditions"></filter-content>
<!-- ts中 -->
@Input() abnormalType: any = [];
@Output() filterConfirmBtn: EventEmitter<any> = new EventEmitter<any>();
@Input() filterCondition: any = {};
@Output() filterConditionChange: EventEmitter<any> = new EventEmitter<any>();
// 绑定触发
confirmClickMethod($event) {
this.filterConditionChange.emit($event);
this.filterConfirmBtn.emit($event);
}
输入框的监听事件
<!-- 输入框的监听及限定字符的输入 -->
<div class="addMemoTextArea">
<ion-textarea no-margin placeholder="请输入" maxlength="100" required name="abnormalText"
[(ngModel)]="textContent" (input)="inputEvent($event)"></ion-textarea>
</div>
-
抽屉效果的实现:
image.png
image.png
image.png
image.png
image.png
image.png
image.png
注: iOS上因为弹簧效果 可能导致抽屉出来后页面还可以滚动, 所以要禁止页面的滚动
// 禁止背景内容滚动
forbidContentScroll() {
//获取当前组件的ID
let aboutContent = document.querySelector("#depositeAuditContent");
//获取当前组件下的scroll-content元素
let scroll: any = aboutContent.querySelector(".scroll-content");
if (!this.toggle) {
scroll.style.overflow = 'hidden';
} else {
scroll.style.overflow = '';
}
}
拥有superTabs的页面pop()返回出现页面空白的解决办法:
参考: https://github.com/zyra/ionic2-super-tabs/issues/29
https://ionicframework.com/docs/native/native-page-transitions/
安装两个依赖:
$ ionic cordova plugin add com.telerik.plugins.nativepagetransitions
$ npm install --save @ionic-native/native-page-transitions
image.png
image.png
页面内弹框效果的实现(效果如下图)
图片
HTLM:
<button ion-button tappable (click)="accountExplainClick()">弹框按钮</button>
<!-- 封装的弹框 -->
<wallet-caller *ngIf="toggleAccountPanel" [clientState]="pageModul.state" [accountExplainPanel]="toggleAccountPanel"></wallet-caller>
TS:
// 进页面注册方法
ionViewWillEnter() {
// 金额说明弹框
window['epInstance'].unbind('toggle_accountExplain_panel').bind('toggle_accountExplain_panel', (data) => {
if (data) {
this.toggleAccountPanel = true;
} else {
this.toggleAccountPanel = false;
}
});
}
// 弹框按钮点击方法
accountExplainClick() {
window['epInstance'].emit('toggle_accountExplain_panel', "accountExplain");
}
<wallet-caller> 中 css 的弹框样式
.account-wrap {
position: fixed;
background-color: rgba(0, 0, 0, .3);
z-index: 10;
width: 100%;
height: 100%;
.remark {
max-height: 75%;
overflow-y: auto;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 10px;
transform: translate(-50%, -50%);
padding: 0px 18px 15px;
z-index: 99;
}
}
// 关闭弹框的方法
close() {
window['epInstance'].emit('toggle_accountExplain_panel', null);
}
遇到的一些报错:
Node Sass does not yet support your current environment解决办法
这个问题在升级ionic2的时候可能会遇到，是sass不支持当前的环境，那么在当前环境重新安装一下就好了
npm uninstall --save node-sass
npm install --save node-sass
ionic 一些常用命令:
-
ionic cordova emulate ios --list 查看支持的设备
-
ionic lab 浏览器上运行
-
npm start 浏览器上运行(检查代码规范)
-
ionic cordova platform add ios 添加平台
-
ionic cordova platform rm ios 移除平台
-
ionic cordova emulate ios 模拟器运行
-
ionic cordova emulate ios --target="iPhone-6s-Plus" 指定模拟器运行 (通过 ionic cordova emulate ios --list 查看支持的模拟器)
-
npm install -g cnpm --registry=https://registry.npm.taobao.org（npm镜像源指向淘宝）
-
ionic g page xxxPage（创建页面)
-
ionic start myApp blank（空项目）
-
ionic start myApp tabs（带导航条）
-
ionic start myApp sidemenu（带侧滑菜单）
-
ionic cordova build ios (编译)
-
ionic cordova build ios --prod (打包用这个命令)
创建插件：
-
plugman create --name UdeskPlugin --plugin_id cordova-plugin-udeskPlugin --plugin_version 0.0.1 // 创建插件
-
plugman platform add --platform_name ios // 添加平台
-
sudo cordova plugin add 插件目录 // 添加插件
-
sudo cordova plugin remove cordova.plugin.UdeskPlugin // 移除插件
-
cordova plugin list // 查看插件列表
参考文章:
持续更新中.....
网友评论