ionic3入门之组件的使用

在学习ionic3之前，你必须有Angular2.0以上的框架学习，Typescript的语法。

先附上官网：https://ionicframework.com/docs/components/

我们先创建一个ionic的项目，在这里我用的是ionic start ionicdemo menu创建的

然后新建一个stylelist的page用于存放所有的components。

指令：ionic g page component  推荐使用指令创建

在这里我只讲解一个小例子：select 

在我们创建的page里面的html我们写我们的页面，语法依赖ng。

< ion-header >

< ion-navbar >

< ion-title >

Selects

</ ion-title >

< button menuToggle >

< ion-icon name= "menu" ></ ion-icon >

</ button >

</ ion-navbar >

</ ion-header >

< ion-content >

< ion-list >

< ion-item >

< ion-label >Gender </ ion-label >

< ion-select [( ngModel)]= "gender" >

< ion-option value= "f" >Female </ ion-option >

< ion-option value= "m" >Male </ ion-option >

</ ion-select >

</ ion-item >

< ion-item >

< ion-label >Gaming </ ion-label >

< ion-select [( ngModel)]= "gaming" interface= "popover" >

< ion-option value= "nes" >NES </ ion-option >

< ion-option value= "n64" >Nintendo64 </ ion-option >

< ion-option value= "ps" >PlayStation </ ion-option >

< ion-option value= "genesis" >Sega Genesis </ ion-option >

< ion-option value= "saturn" >Sega Saturn </ ion-option >

< ion-option value= "snes" >SNES </ ion-option >

</ ion-select >

</ ion-item >

< ion-item >

< ion-label >Notifications </ ion-label >

< ion-select [( ngModel)]= "notifications" interface= "action-sheet" >

< ion-option value= "enable" >Enable </ ion-option >

< ion-option value= "mute" >Mute </ ion-option >

< ion-option value= "mute_week" >Mute for a week </ ion-option >

< ion-option value= "mute_year" ( ionSelect)= "notificationSelect($event)" >Mute for a year </ ion-option >

</ ion-select >

</ ion-item >

< ion-item >

< ion-label >Operating System </ ion-label >

< ion-select [( ngModel)]= "os" submitText= "Okay" cancelText= "Nah" >

< ion-option value= "dos" >DOS </ ion-option >

< ion-option value= "lunix" >Linux </ ion-option >

< ion-option value= "mac7" >Mac OS 7 </ ion-option >

< ion-option value= "mac8" >Mac OS 8 </ ion-option >

< ion-option value= "win3.1" >Windows 3.1 </ ion-option >

< ion-option value= "win95" >Windows 95 </ ion-option >

< ion-option value= "win98" >Windows 98 </ ion-option >

</ ion-select >

</ ion-item >

< ion-item >

< ion-label >Music </ ion-label >

< ion-select [( ngModel)]= "music" [ selectOptions]= "musicAlertOpts" >

< ion-option >Alice in Chains </ ion-option >

< ion-option >Green Day </ ion-option >

< ion-option >Nirvana </ ion-option >

< ion-option >Pearl Jam </ ion-option >

< ion-option >Smashing Pumpkins </ ion-option >

< ion-option >Soundgarden </ ion-option >

< ion-option ( select)= "stpSelect()" >Stone Temple Pilots </ ion-option >

</ ion-select >

</ ion-item >

< ion-item >

< ion-label >Date </ ion-label >

< ion-select [( ngModel)]= "month" >

< ion-option value= "01" >January </ ion-option >

< ion-option value= "02" >February </ ion-option >

< ion-option value= "03" >March </ ion-option >

< ion-option value= "04" >April </ ion-option >

< ion-option value= "05" >May </ ion-option >

< ion-option value= "06" >June </ ion-option >

< ion-option value= "07" >July </ ion-option >

< ion-option value= "08" >August </ ion-option >

< ion-option value= "09" >September </ ion-option >

< ion-option value= "10" >October </ ion-option >

< ion-option value= "11" >November </ ion-option >

< ion-option value= "12" checked= "true" >December </ ion-option >

</ ion-select >

< ion-select [( ngModel)]= "year" >

< ion-option >1989 </ ion-option >

< ion-option >1990 </ ion-option >

< ion-option >1991 </ ion-option >

< ion-option >1992 </ ion-option >

< ion-option >1993 </ ion-option >

< ion-option checked= "true" >1994 </ ion-option >

< ion-option >1995 </ ion-option >

< ion-option >1996 </ ion-option >

< ion-option >1997 </ ion-option >

< ion-option >1998 </ ion-option >

< ion-option >1999 </ ion-option >

</ ion-select >

</ ion-item >

</ ion-list >

</ ion-content >

ts文件：

import { Component } from '@angular/core';

import { IonicPage } from 'ionic-angular';

@ IonicPage({

name: 'select'

})

@ Component({

selector: 'page-select',

templateUrl: 'select.html',

})

export class SelectPage {

ionViewDidLoad() {

console. log( 'ionViewDidLoad SelectPage');

}

gaming: string = "n64";

gender: string = "f";

os: string;

music: string;

month: string;

year: number;

musicAlertOpts: { title: string, subTitle: string };

constructor() {

this. musicAlertOpts = {

title: '1994 Music',

subTitle: 'Select your favorite'

};

}

stpSelect() {

console. log( 'STP selected');

}

}

module.ts:

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { SelectPage } from './select';

@ NgModule({

declarations: [

SelectPage,

],

imports: [

IonicPageModule. forChild( SelectPage),

],

})

export class SelectPageModule {}

效果：

具体修改参数以及事件可以参考：https://ionicframework.com/docs/api/components/select/Select/

里面有详细的参数设置，与插件一样，很轻松的应用于生产实践中。

最后附上所有所有demo的gitup地址：https://github.com/liuchuancong/ionicDemo

喜欢的话记得给个star哦！

有不会的小伙伴欢迎留言，转载请标释作者。