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返回鍵

中文的 ¥

  &yen;

極光推送打開指定頁面

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接入第三方登陸

http://www.lxweimin.com/p/ae0d925737f7

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容