摘要：
11122018.08.1212:05:24131415Happy Home Area16请确认。
本文整理了使用ionic3开发时会用到的一些最基本组件及用法
1、ion-tabs
最常见的通过标签切换页面：
tabs.html
1 <ion-tabs> 2 <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab> 3 <ion-tab [root]="tab2Root" tabTitle="消息" tabIcon="text"></ion-tab> 4 <ion-tab [root]="tab3Root" tabTitle="查询" tabIcon="search"></ion-tab> 5 <ion-tab [root]="tab4Root" tabTitle="我的" tabIcon="contact"></ion-tab> 6 </ion-tabs>
tabs.ts
1 import { Component } from '@angular/core'; 2 import { AboutPage } from '../about/about'; 3 import { ContactPage } from '../contact/contact'; 4 import { HomePage } from '../home/home'; 5 import { MessagePage } from '../message/message'; 6 7 @Component({ 8 templateUrl: 'tabs.html' 9 }) 10 export class TabsPage { 11 12 tab1Root = HomePage; 13 tab2Root = MessagePage; 14 tab3Root = AboutPage; 15 tab4Root = ContactPage; 16 17 constructor() { 18 19 } 20 }
- ion-tabs位于顶部：
1 <ion-content padding> 2 <ion-tabs tabsPlacement="top"> 3 <ion-tab [root]="tab1" tabTitle="待办事项"></ion-tab> 4 <ion-tab [root]="tab2" tabTitle="全部列表"></ion-tab> 5 </ion-tabs> 6 </ion-content>
- 页面跳转时，定位到ion-tabs某个页签
1 <ion-tabs tabsPlacement="top" #myTabs> 2 <ion-tab [root]="tab1" tabTitle="页签一"></ion-tab> 3 <ion-tab [root]="tab2" tabTitle="页签二"></ion-tab> 4 <ion-tab [root]="tab3" tabTitle="页签三"></ion-tab> 5 <ion-tab [root]="tab4" tabTitle="页签四"></ion-tab> 6 </ion-tabs>
1 import { Component,ViewChild } from '@angular/core'; 2 import { NavController,NavParams,Tabs } from 'ionic-angular'; 3 4 import { SurveyPage } from '../survey/survey'; 5 import { DesignPage } from '../design/design'; 6 import { ReportPage } from '../report/report'; 7 import { FeedbackPage } from '../feedback/feedback'; 8 9 @Component({ 10 selector: 'page-projectDetail', 11 templateUrl: 'projectDetail.html' 12 }) 13 export class ProjectDetailPage { 14 tab1 = SurveyPage; 15 tab2 = DesignPage; 16 tab3 = ReportPage; 17 tab4 = FeedbackPage; 18 19 @ViewChild('myTabs') tabRef: Tabs; 20 pageIndex; 21 constructor(public navCtrl: NavController,public params:NavParams) { 22 //获取传递过来的参数 23 this.pageIndex=this.params.get('page'); 24 25 } 26 27 ionViewDidEnter(){ 28 if (this.pageIndex && this.pageIndex != '') { 29 this.tabRef.select(this.pageIndex); 30 } 31 } 32 33 }
2、ion-list
1 <ion-list> 2 <button ion-item text-wrap (click)="goProjectDetail()"> 3 <h2 style="padding-top: 10px;">幸福家园小区</h2> 4 <p style="margin: 10px 0;">请确认。</p> 5 <ion-icon name="ios-checkmark-circle-outline" item-end></ion-icon> 6 <p><ion-icon name="time"></ion-icon>2018.08.12 12:05:24</p> 7 </button> 8 <button ion-item text-wrap (click)="goProjectDetail()"> 9 <h2 style="padding-top: 10px;">幸福家园小区</h2> 10 <p style="margin: 10px 0;">请确认。</p> 11 <ion-icon name="ios-checkmark-circle-outline" item-end></ion-icon> 12 <p><ion-icon name="time"></ion-icon>2018.08.12 12:05:24</p> 13 </button> 14 <button ion-item text-wrap (click)="goProjectDetail()"> 15 <h2 style="padding-top: 10px;">幸福家园小区</h2> 16 <p style="margin: 10px 0;">请确认。</p> 17 <ion-icon name="ios-checkmark-circle-outline" item-end></ion-icon> 18 <p><ion-icon name="time"></ion-icon>2018.08.12 12:05:24</p> 19 </button> 20 </ion-list>
- ion-list下拉展开折叠子列表，默认展开第一个子列表
1 <ion-list> 2 <ion-item (click)="isShow=!isShow">list1 3 <ion-icon name="arrow-dropup" *ngIf="!isShow"></ion-icon> 4 <ion-icon name="arrow-dropdown" *ngIf="isShow"></ion-icon> 5 </ion-item> 6 <ion-list *ngIf="!isShow"> 7 <ion-item (click)="showpdf()"><p>list1-1</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item> 8 </ion-list> 9 <ion-list *ngIf="!isShow"> 10 <ion-item (click)="showpdf()"><p>list1-2</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item> 11 </ion-list> 12 <ion-list *ngIf="!isShow"> 13 <ion-item (click)="showpdf()"><p>list1-3</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item> 14 </ion-list> 15 <ion-item (click)="isShowjg=!isShowjg">list2 16 <ion-icon name="arrow-dropup" *ngIf="isShowjg"></ion-icon> 17 <ion-icon name="arrow-dropdown" *ngIf="!isShowjg"></ion-icon> 18 </ion-item> 19 <ion-list *ngIf="isShowjg"> 20 <ion-item (click)="showpdf()"><p>list2-1</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item> 21 </ion-list> 22 <ion-list *ngIf="isShowjg"> 23 <ion-item (click)="showpdf()"><p>list2-2</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item> 24 </ion-list> 25 <ion-item (click)="isShowjps=!isShowjps">list3 26 <ion-icon name="arrow-dropup" *ngIf="isShowjps"></ion-icon> 27 <ion-icon name="arrow-dropdown" *ngIf="!isShowjps"></ion-icon> 28 </ion-item> 29 <ion-list *ngIf="isShowjps"> 30 <ion-item (click)="showpdf()"><p>list3-1</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item> 31 </ion-list> 32 </ion-list>
官方提供了按钮的多种样式
<button ion-button round outline style="float: right" (click)="goPage()">查看状态</button>
点击选择组件时，会弹出一个选择列表。
1 <ion-select style="max- 100%; margin: 0 auto;" [(ngModel)]="singles" multiple="false" cancelText="取消" okText="确定"> 2 <ion-option selected="true">option1</ion-option> 3 <ion-option>option2</ion-option> 4 <ion-option>option3</ion-option> 5 </ion-select>
- multiple属性可以控制是否多选，cancelText 和 okText可以指定ion-select按钮的文本；ion-option的selected属性可以设置默认选项。
1 <button ion-item text-wrap (click)="gotoPage2()"> 2 <ion-label><h2>手势解锁</h2></ion-label> 3 <ion-toggle outline item-end icon-left checked="{{ flag }}" (ionChange)="gotoPage2()"></ion-toggle> 4 </button>
6、Alerts
1 import { Component } from '@angular/core'; 2 import { NavController, AlertController } from 'ionic-angular'; 3 4 @Component({ 5 selector: 'page-design', 6 templateUrl: 'design.html' 7 }) 8 export class DesignPage { 9 10 constructor(public navCtrl: NavController, public alertCtrl: AlertController) { 11 } 12 13 showAlert() { 14 let alert = this.alertCtrl.create({ 15 title: '提示', 16 message: '注册成功!', 17 buttons: ['OK'] 18 }); 19 alert.present(); 20 } 21 22 }
1 import { Component } from '@angular/core'; 2 import { NavController, AlertController} from 'ionic-angular'; 3 4 @Component({ 5 selector: 'page-design', 6 templateUrl: 'design.html' 7 }) 8 export class DesignPage { 9 10 constructor(public navCtrl: NavController, public alertCtrl: AlertController) { 11 } 12 13 showPrompt() { 14 let prompt = this.alertCtrl.create({ 15 title: 'alert-prompt', 16 inputs: [ 17 { 18 name: 'title', 19 placeholder: 'Title' 20 },{ 21 name: 'title', 22 placeholder: 'Title' 23 }, 24 ], 25 buttons: [ 26 { 27 text: '取消', 28 handler: data => { 29 // console.log('Cancel clicked'); 30 } 31 }, 32 { 33 text: '确认', 34 handler: data => { 35 // console.log('Saved clicked'); 36 } 37 } 38 ] 39 }); 40 prompt.present(); 41 } 42 43 }
8、Modals
1 import { Component } from '@angular/core'; 2 import { NavController, ModalController } from 'ionic-angular'; 3 import { AdmissPage } from '../admiss/admiss'; 4 5 6 @Component({ 7 selector: 'page-design', 8 templateUrl: 'design.html' 9 }) 10 export class DesignPage { 11 12 constructor(public navCtrl: NavController, public modalCtrl: ModalController) { 13 } 14 15 goAdmiss() { 16 let modal = this.modalCtrl.create(AdmissPage, { 17 cssClass: 'custom-modal' 18 }); 19 modal.present(); 20 } 21 }
- 上面代码中设置的参数cssClass: 'custom-modal' 是为了实现给模态窗口加背景浮层，需要同时设置弹出页面的样式
1 .custom-modal { 2 3 background-color: rgba(0, 0, 0, .5) !important; 4 5 }
9、点击按钮页面跳转
<button ion-button round outline style="float: right" (click)="goPage()">查看状态</button>
1 import { Component } from '@angular/core'; 2 import { NavController, ModalController } from 'ionic-angular'; 3 import { ProjectDetailPage } from '../projectDetail/projectDetail'; 4 import { App } from 'ionic-angular'; 5 6 @Component({ 7 selector: 'page-lists', 8 templateUrl: 'lists.html' 9 }) 10 export class ListsPage { 11 12 constructor(public navCtrl: NavController, public app: App) { 13 14 } 15 goPage() { 16 // this.navCtrl.push(ProjectDetailPage); 17 this.app.getRootNavs()[0].push(ProjectDetailPage); 18 } 19 20 }
10、返回
1 import { Component } from '@angular/core'; 2 import { NavController } from 'ionic-angular'; 3 4 @Component({ 5 selector: 'page-process', 6 templateUrl: 'process.html' 7 }) 8 export class ProcessPage { 9 10 constructor(public navCtrl: NavController) { 11 12 } 13 goBack() { 14 this.navCtrl.pop(); 15 } 16 }
11、ion-icon
官方提供了丰富的图标库ionicons
<ion-icon name="ios-arrow-forward" style="font-size: 24px;" item-right></ion-icon>