使用ionic3快速开发webapp（二）

本文整理了使用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>

3、ion-button

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

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

4、ion-select

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

1 <ion-select style="max-width: 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属性可以设置默认选项。

5、ion-toggle

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 }

7、alert-prompt

 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>

 

posted @ 2018-05-28 20:46  wuln  阅读(2058)  评论(0)  编辑  收藏  举报