1. 程式人生 > >Ionic2之tabs相關內容和其他一些坑

Ionic2之tabs相關內容和其他一些坑

tabs相關內容:

1、 ionic2 中隱藏子頁面tabs選項卡的三種方法

第一種: 隱藏全部子頁面的tabs選項介面找到app.module.ts檔案 ,修改如下程式碼

imports: [
    IonicModule.forRoot(MyApp,{
      tabsHideOnSubPages: 'true'         //隱藏全部子頁面tabs
    })
  ],

第二種:隱藏某個子頁面的tabs ; 缺點:當子頁面使用pop()方法退出時,父頁面的任何事件都不響應。

import{ App } from'ionic-angular';        //1.引入App類
constructor(privateapp:App) {} //2.宣告初始化app物件 this.app.getRootNav().push(nextPage); //3.呼叫this.app.getRootNav() 從根頁面跳轉就可以了

第三種:隱藏某個子頁面的tabs; 缺點:暫無

//當頁面進入初始化的時候
    letelements = document.querySelectorAll(".tabbar");
    if(elements !=null) {
        Object.keys(elements).map((key) => {
            elements[key].style.display ='none'
; })
; } //當退出頁面的時候 ionViewWillLeave() { letelements = document.querySelectorAll(".tabbar"); if(elements !=null) { Object.keys(elements).map((key) => { elements[key].style.display ='flex'; }); } }

2、Ionic2 元件之Tab的基本屬性和事件


示例html程式碼如下:

<ion-tabs #mainTabs (ionChange)="changeTabs()" color="danger" tabsHighlight="true"> <ion-tab [root]="tab1Root" [rootParams]="homeParams" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" (ionSelect)="selectFriend()" tabTitle="Friends" tabIcon="aperture" tabBadge="3" tabBadgeStyle="danger"></ion-tab> <ion-tab [root]="tab3Root" enabled="false" swipeBackEnabled="true" tabTitle="Contact" tabIcon="contacts"></ion-tab> </ion-tabs>

3、ionic的一些坑

  1. 如何在push頁面後隱藏tabbar

    在ionicBootstrap中設定tabsHideOnSubPages為true

  2. 如何設定返回按鍵文字

    在ionicBootstrap中設定backButtonText,如”返回”或”“

  3. 如何設定跨域訪問

    在config.xml中

  4. 如何在page pop後傳遞引數到前一個頁面

    a) 使用model來代替push,然後在dismiss方法中傳遞引數

    b) 使用Promise

    parent:

    new Promise((resolve, reject) => {  
      this.nav.push(ChildPage, {resolve: resolve});  
    }).then(data => {  
      let value = data["property"];  
    });  

child:

    let resolve = this.navParams.get("resolve");  
    resolve({property: value});  

5 . 如何設定button的disabled狀態:注意解除disabled狀態需要設定繫結變數為null

    <button disabled=“{{buttonDisabled}}”>  
    this.buttonDisabled = true;  
    this.buttonDisabled = null;  

6.如何修改slides的bullet

在slides的option中新增下面兩個屬性:
    bulletClass: "my-swiper-pagination-bullet",  
    bulletActiveClass: 'my-swiper-pagination-bullet-active'