ionic3 一些小技巧

没有右边的小角标

 button ion-item (click)="checkNewVersion()" detail-none></button>

inpout发送短信按

 <ion-item>
  <ion-label>手机验证</ion-label>
  <ion-input type="number" [(ngModel)]="oCode" placeholder="请输入手机验证码"></ion-input>
  <button class="sendBtn" ion-button item-end (click)="oldPhone()"></button>
</ion-item>

在ios content上不想下拉有回弹效果

<ion-content no-bounce></ion-content>

在安卓手机上ion-item Border不显示，在variables.css

$hairlines-width:1px;
$list-border-color: #e0dfe4;
$toolbar-background: color($colors, dark);

tabs指定选中那个

<ion-tabs selectedIndex="1">
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

键盘弹出tabs禁止挤上去

  adjustPan|stateHidden

自定义返回按钮事件

 export class Page {
    @ ViewChild(Navbar) navBar: Navbar; ①

    ionViewDidLoad() { ②
        this.navBar.backButtonClick = this.backButtonClick; ③
     }

    backButtonClick = (e: UIEvent) => {
    // do something
      this.navCtrl.pop();
  }
 }

返回指定页面

this.navCtrl.popTo(this.navCtrl.getByIndex(this.navCtrl.length() - 3));
this.navCtrl.length() - 3  //通过计算得到指定页面

返回传值问题请点击这里

生成启动图标命令

ionic cordova resources [platform]

双击退出App,捕捉Android返回键

中文的 ¥

  ¥

极光推送打开指定页面

this.jPushPlugin.openNotification()
    .subscribe( res => {
        this.jPushPlugin.setApplicationIconBadgeNumber(0);
        this.nav.push('TabsPage');
    });

生命周期

如果你需要不带任何符号的纯数字键盘，可以用 pattern 属性用正则表达式将输入的内容限定位纯数字

<ion-input type="number" pattern="[0-9]*" value=""></ion-input>

手机连接chorme浏览器调试

  chrome://inspect/#devices

alert框，点击空白地方禁止隐藏弹框

enableBackdropDismiss

监听app进入前台

platform.resume.subscribe(() => {
  alert('进入前台')
});

移动端自定义弹框禁止滚动

点击跳转指定Tabs页面

this.navCtrl.parent.select(2);

使用jquery

npm install jquery --save
npm install @types/jquery --save
declare let $: any;  //使用的页面

内置浏览器在ios加载页面沉浸问题

image.png

https://stackoverflow.com/questions/47848602/ionic-plugin-themeablebrowser-offset-issue-on-iphone-x

ionic接入第三方登陆

https://www.jianshu.com/p/ae0d925737f7