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哦！
有不会的小伙伴欢迎留言，转载请标释作者。