ionic3 一些小技巧

绝地灬酷狼 2022-02-26 00:42 340阅读 0赞

原文出处：[https://www.jianshu.com/p/2b2d3d44861c][https_www.jianshu.com_p_2b2d3d44861c]

没有右边的小角标

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  //通过计算得到指定页面

[返回传值问题请点击这里][Link 1]

生成启动图标命令

ionic cordova resources [platform]

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

中文的 ¥

极光推送打开指定页面

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

[生命周期][Link 2]

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

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

手机连接chorme浏览器调试

chrome://inspect/#devices

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

enableBackdropDismiss

监听app进入前台

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

[移动端自定义弹框禁止滚动][Link 3]

点击跳转指定Tabs页面

this.navCtrl.parent.select(2);

使用jquery

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

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

![Image 1][]

image.png

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

ionic接入第三方登陆

[https://www.jianshu.com/p/ae0d925737f7][https_www.jianshu.com_p_ae0d925737f7]

作者：Kathy丶Andy  
链接：https://www.jianshu.com/p/2b2d3d44861c  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[https_www.jianshu.com_p_2b2d3d44861c]: https://www.jianshu.com/p/2b2d3d44861c
[Link 1]: https://www.jianshu.com/p/f8a357eff039
[App_Android]: https://www.jianshu.com/p/99895ecd1920
[Link 2]: https://www.jianshu.com/p/72b704b5c9ed
[Link 3]: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
[Image 1]: 
[https_www.jianshu.com_p_ae0d925737f7]: https://www.jianshu.com/p/ae0d925737f7