使用ionic3快速开发webapp（二）

本文整理了使用ionic3开发时会用到的一些最基本组件及用法

1、ion-tabs

最常见的通过标签切换页面：

tabs.html

 <ion-tabs>
   <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
   <ion-tab [root]="tab2Root" tabTitle="消息" tabIcon="text"></ion-tab>
   <ion-tab [root]="tab3Root" tabTitle="查询" tabIcon="search"></ion-tab>
   <ion-tab [root]="tab4Root" tabTitle="我的" tabIcon="contact"></ion-tab>
 </ion-tabs>

tabs.ts

 import { Component } from '@angular/core';
 import { AboutPage } from '../about/about';
 import { ContactPage } from '../contact/contact';
 import { HomePage } from '../home/home';
 import { MessagePage } from '../message/message';
 
 @Component({
   templateUrl: 'tabs.html'
 })
 export class TabsPage {
 
   tab1Root = HomePage;
   tab2Root = MessagePage;
   tab3Root = AboutPage;
   tab4Root = ContactPage;
 
   constructor() {
 
   }
 }

• ion-tabs位于顶部：

 <ion-content padding>
   <ion-tabs tabsPlacement="top">
     <ion-tab [root]="tab1" tabTitle="待办事项"></ion-tab>
     <ion-tab [root]="tab2" tabTitle="全部列表"></ion-tab>
   </ion-tabs>
 </ion-content>

• 页面跳转时，定位到ion-tabs某个页签

 <ion-tabs tabsPlacement="top" #myTabs>
     <ion-tab [root]="tab1" tabTitle="页签一"></ion-tab>
     <ion-tab [root]="tab2" tabTitle="页签二"></ion-tab>
     <ion-tab [root]="tab3" tabTitle="页签三"></ion-tab>
     <ion-tab [root]="tab4" tabTitle="页签四"></ion-tab>
 </ion-tabs>

 import { Component,ViewChild } from '@angular/core';
 import { NavController,NavParams,Tabs } from 'ionic-angular';
 
 import { SurveyPage } from '../survey/survey';
 import { DesignPage } from '../design/design';
 import { ReportPage } from '../report/report';
 import { FeedbackPage } from '../feedback/feedback';
 
 @Component({
   selector: 'page-projectDetail',
   templateUrl: 'projectDetail.html'
 })
 export class ProjectDetailPage {
   tab1 = SurveyPage;
   tab2 = DesignPage;
   tab3 = ReportPage;
   tab4 = FeedbackPage;
 
   @ViewChild('myTabs') tabRef: Tabs;
   pageIndex;
   constructor(public navCtrl: NavController,public params:NavParams) {
   //获取传递过来的参数
     this.pageIndex=this.params.get('page');
 
   }
 
   ionViewDidEnter(){
    if (this.pageIndex && this.pageIndex != '') {
       this.tabRef.select(this.pageIndex);
    }
   }
 
 }

2、ion-list

 <ion-list>
       <button ion-item text-wrap (click)="goProjectDetail()">
           <h2 style="padding-top: 10px;">幸福家园小区</h2>
           <p style="margin: 10px 0;">请确认。</p>
           <ion-icon name="ios-checkmark-circle-outline" item-end></ion-icon>
           <p><ion-icon name="time"></ion-icon>2018.08.12 12:05:24</p>
       </button>
       <button ion-item text-wrap (click)="goProjectDetail()">
           <h2 style="padding-top: 10px;">幸福家园小区</h2>
           <p style="margin: 10px 0;">请确认。</p>
           <ion-icon name="ios-checkmark-circle-outline" item-end></ion-icon>
           <p><ion-icon name="time"></ion-icon>2018.08.12 12:05:24</p>
       </button>
       <button ion-item text-wrap (click)="goProjectDetail()">
           <h2 style="padding-top: 10px;">幸福家园小区</h2>
           <p style="margin: 10px 0;">请确认。</p>
           <ion-icon name="ios-checkmark-circle-outline" item-end></ion-icon>
           <p><ion-icon name="time"></ion-icon>2018.08.12 12:05:24</p>
       </button>
 </ion-list>

• ion-list下拉展开折叠子列表，默认展开第一个子列表

   <ion-list>
     <ion-item (click)="isShow=!isShow">list1
             <ion-icon name="arrow-dropup" *ngIf="!isShow"></ion-icon>
             <ion-icon name="arrow-dropdown" *ngIf="isShow"></ion-icon>
         </ion-item>
     <ion-list *ngIf="!isShow">
       <ion-item (click)="showpdf()"><p>list1-1</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
     </ion-list>
     <ion-list *ngIf="!isShow">
       <ion-item (click)="showpdf()"><p>list1-2</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
     </ion-list>
     <ion-list *ngIf="!isShow">
       <ion-item (click)="showpdf()"><p>list1-3</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
     </ion-list>
     <ion-item (click)="isShowjg=!isShowjg">list2
             <ion-icon name="arrow-dropup" *ngIf="isShowjg"></ion-icon>
             <ion-icon name="arrow-dropdown" *ngIf="!isShowjg"></ion-icon>
         </ion-item>
         <ion-list *ngIf="isShowjg">
       <ion-item (click)="showpdf()"><p>list2-1</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
     </ion-list>
     <ion-list *ngIf="isShowjg">
       <ion-item (click)="showpdf()"><p>list2-2</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
     </ion-list>
     <ion-item (click)="isShowjps=!isShowjps">list3
             <ion-icon name="arrow-dropup" *ngIf="isShowjps"></ion-icon>
             <ion-icon name="arrow-dropdown" *ngIf="!isShowjps"></ion-icon>
         </ion-item>
         <ion-list *ngIf="isShowjps">
       <ion-item (click)="showpdf()"><p>list3-1</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
     </ion-list>
 </ion-list>

3、ion-button

官方提供了按钮的多种样式

<button ion-button round outline style="float: right" (click)="goPage()">查看状态</button>

4、ion-select

点击选择组件时，会弹出一个选择列表。

 <ion-select style="max-width: 100%; margin: 0 auto;" [(ngModel)]="singles" multiple="false" cancelText="取消" okText="确定">
       <ion-option selected="true">option1</ion-option>
       <ion-option>option2</ion-option>
       <ion-option>option3</ion-option>
 </ion-select> 

• multiple属性可以控制是否多选，cancelText 和 okText可以指定ion-select按钮的文本；ion-option的selected属性可以设置默认选项。

5、ion-toggle

   <button ion-item text-wrap (click)="gotoPage2()">
     <ion-label><h2>手势解锁</h2></ion-label>
     <ion-toggle outline item-end icon-left checked="{{ flag }}" (ionChange)="gotoPage2()"></ion-toggle>
   </button>

6、Alerts

 import { Component } from '@angular/core';
 import { NavController, AlertController } from 'ionic-angular';
 
 @Component({
   selector: 'page-design',
   templateUrl: 'design.html'
 })
 export class DesignPage {
 
   constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
   }
 
   showAlert() {
     let alert = this.alertCtrl.create({
       title: '提示',
       message: '注册成功!',
       buttons: ['OK']
     });
     alert.present();
   }
 
 }

7、alert-prompt

 import { Component } from '@angular/core';
 import { NavController, AlertController} from 'ionic-angular';
 
 @Component({
   selector: 'page-design',
   templateUrl: 'design.html'
 })
 export class DesignPage {
 
   constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
   }
 
   showPrompt() {
     let prompt = this.alertCtrl.create({
       title: 'alert-prompt',
       inputs: [
         {
           name: 'title',
           placeholder: 'Title'
         },{
           name: 'title',
           placeholder: 'Title'
         },
       ],
       buttons: [
         {
           text: '取消',
           handler: data => {
             // console.log('Cancel clicked');
           }
         },
         {
           text: '确认',
           handler: data => {
             // console.log('Saved clicked');
           }
         }
       ]
     });
     prompt.present();
   }
 
 }

8、Modals 

 import { Component } from '@angular/core';
 import { NavController, ModalController } from 'ionic-angular';
 import { AdmissPage } from '../admiss/admiss';
 
 @Component({
   selector: 'page-design',
   templateUrl: 'design.html'
 })
 export class DesignPage {
 
   constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
   }
 
   goAdmiss() {
     let modal = this.modalCtrl.create(AdmissPage, {
       cssClass: 'custom-modal'
     });
     modal.present();
   }
 }

• 上面代码中设置的参数cssClass: 'custom-modal'  是为了实现给模态窗口加背景浮层，需要同时设置弹出页面的样式

 .custom-modal {
 
     background-color: rgba(0, 0, 0, .5) !important;
 
 }

9、点击按钮页面跳转

<button ion-button round outline style="float: right" (click)="goPage()">查看状态</button> 

 import { Component } from '@angular/core';
 import { NavController, ModalController } from 'ionic-angular';
 import { ProjectDetailPage } from '../projectDetail/projectDetail';
 import { App } from 'ionic-angular';
 
 @Component({
   selector: 'page-lists',
   templateUrl: 'lists.html'
 })
 export class ListsPage {
 
   constructor(public navCtrl: NavController, public app: App) {     
 
   }
   goPage() {
     // this.navCtrl.push(ProjectDetailPage);
     this.app.getRootNavs()[0].push(ProjectDetailPage);
   }
 
 }

10、返回

 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
 
 @Component({
   selector: 'page-process',
   templateUrl: 'process.html'
 })
 export class ProcessPage {
 
   constructor(public navCtrl: NavController) {
 
   }
   goBack() {
       this.navCtrl.pop();
   }
 }

 11、ion-icon

官方提供了丰富的图标库ionicons

<ion-icon name="ios-arrow-forward" style="font-size: 24px;" item-right></ion-icon>