• 使用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- 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>
  • 相关阅读:
    Promise
    replace
    mongogogog
    sh back mongo
    mongodb 备份 还原 导出 导入
    mongo virtual
    openssl
    isMobile
    google api autocomplete
    npm
  • 原文地址:https://www.cnblogs.com/wuln/p/9101892.html
走看看 - 开发者的网上家园