4 轮播,搜索,切换

4.1 轮播图

Ionic4.x 中的轮播图组件是基于 swiper 插件，所以配置 slides 的属性需要在 swiper 的 api 中找

Swiper Api：http://idangero.us/swiper/api/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-slide',
  templateUrl: './slide.component.html',
  styleUrls: ['./slide.component.scss'],
})
export class SlideComponent implements OnInit {
    slideOpts = {
        effect: 'flip',
        speed: 400,
        loop: true,
        autoplay: {
            delay: 2000
        }
    };

  constructor() { }

  ngOnInit() {}
}

如果是内容则如下：

1
2
3
4
5
6
7
8
9
10
11
<ion-slides pager="true" [options]="slideOpts">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

如果是图片如下

1
2
3
4
5
6
7
8
9
10
11
<ion-slides pager="true" [options]="slideOpts">
  <ion-slide>
    <img src="/assets/03.png">
  </ion-slide>
  <ion-slide>
    <img src="/assets/02.png">
  </ion-slide>
  <ion-slide>
    <img src="/assets/01.png">
  </ion-slide>
</ion-slides>

轮播属性：

1
2
3
4
5
6
7
8
slideOpts = {
        effect: 'flip', // 轮播效果
        speed: 400,
        loop: true, // 循环轮播
        autoplay: { // 自动轮播
            delay: 2000 // 延迟2秒
        }
    };

轮播图高级
获取 slide 对象之第一步，定义名称

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd)="ionSlideTouchEnd()">
  <ion-slide>
    <img src="/assets/03.png">
  </ion-slide>
  <ion-slide>
    <img src="/assets/02.png">
  </ion-slide>
  <ion-slide>
    <img src="/assets/01.png">
  </ion-slide>
</ion-slides>

<ion-button (click)="slideNext()">点击按钮切换到下一页</ion-button>
<ion-button (click)="slidePrev()">点击按钮切换到上一页</ion-button>

引入 ViewChild 获取 slide 对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-slide',
  templateUrl: './slide.component.html',
  styleUrls: ['./slide.component.scss'],
})
export class SlideComponent implements OnInit {
    @ViewChild('slide1') slide;
    slideOpts = {
        effect: 'flip', // 轮播效果
        speed: 400,
        loop: true, // 循环轮播
        autoplay: { // 自动轮播
            delay: 2000 // 延迟2秒
        }
    };

    slideNext() {
      this.slide.slideNext(); // 触发方法轮播到下一页
    }
    slidePrev() {
      this.slide.slidePrev(); // 触发方法轮播到上一页
    }
    slideUpdate() {
      this.slide.slideUpdate(); // 请求时局完成后更新轮播图
    }

    ionSlideTouchEnd() {
      this.slide.startAutoplay(); // 解决手动轮播后不自动轮播
    }
  constructor() { }

  ngOnInit() {}

}

4.2 搜索

ion-searchbar

placeholder: 默认内容
animated：添加动画效果
type：指定输出的类型
debounce: 防抖动，就是延迟方法
ionChange: 值改变后触发的方法

1
<ion-searchbar placeholder="请输入搜索内容" animated type="number" debounce="500" (ionChange)="doChange()"></ion-searchbar>

4.3 Tab切换

ion-segment
1. 第一种获取值得方法

1
2
3
4
5
6
7
8
9
10
11
<ion-segment (ionChange)="segmentChanged($event)">
  <ion-segment-button value="首页">
    <ion-label>首页</ion-label>
  </ion-segment-button>
  <ion-segment-button value="详情">
    <ion-label>详情</ion-label>
  </ion-segment-button>
  <ion-segment-button value="评论">
    <ion-label>评论</ion-label>
  </ion-segment-button>
</ion-segment>

1
2
3
segmentChanged(ev: any) {
        console.log('Segment changed', ev.detail.value);
    }

2. 第二种获取值得方法

1
2
3
4
5
6
7
8
9
10
11
12
13
<ion-segment [(ngModel)]="tab">
  <ion-segment-button value="tab1">
    <ion-label>首页</ion-label>
  </ion-segment-button>
  <ion-segment-button value="tab2">
    <ion-label>详情</ion-label>
  </ion-segment-button>
  <ion-segment-button value="tab3">
    <ion-label>评论</ion-label>
  </ion-segment-button>
</ion-segment>

{{tab}}

这个模块需要引入如下：

1
2
3
4
5
6
7
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule
  ],
})

定义初始的tab

1
public tab = 'tab1';

3. 切换tab

利用ngSwitch实现tab切换

注意value中双引号还要有单引号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ion-segment [(ngModel)]="tab">
  <ion-segment-button value="tab1">
    <ion-label>首页</ion-label>
  </ion-segment-button>
  <ion-segment-button value="tab2">
    <ion-label>详情</ion-label>
  </ion-segment-button>
  <ion-segment-button value="tab3">
    <ion-label>评论</ion-label>
  </ion-segment-button>
</ion-segment>
<div class="info" [ngSwitch]="tab">
  <div *ngSwitchCase="'tab1'">
    首页
  </div>
  <div *ngSwitchCase="'tab2'">
    详情
  </div>
  <div *ngSwitchCase="'tab3'">
    评论
  </div>
</div>

5 日期

5.1 基本用法

display-format: 表示时间的展示形式（2019-06-01）
picker-format：表示选择时间显示那些，这里显示年月日
YYYY显示（2019）
YY显示（19）
min：起始时间
max：结束时间

1
2
3
4
<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" min="1989-06-04" max="2004-08-23"></ion-datetime>
</ion-item>

5.2 数据绑定

前提还是在模块中引入ngModle模块，同上

1
2
3
4
5
<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" [(ngModel)]="day"></ion-datetime>
</ion-item>
{{day}}

1
2
// 这里的格式必须是YYYY-MM-DD相同的模式
day = '2019-03-21';

5.3 显示当前日期

首先安装时间格式化包

npm install silly-datetime

引入该模块格式化时间

1
2
3
4
import sd from 'silly-datetime';
constructor() {
      this.day = sd.format(new Date(), 'YYYY-MM-DD');
  }

5.4 监听事件

1. 通过变量获取时间

1
2
3
4
5
<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" [(ngModel)]="day"
  (ionChange)="changeTime()"></ion-datetime>
</ion-item>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Component, OnInit, ViewChild } from '@angular/core';
import sd from 'silly-datetime';
@Component({
  selector: 'app-slide',
  templateUrl: './slide.component.html',
  styleUrls: ['./slide.component.scss'],
})
export class SlideComponent implements OnInit {
    day = '2019-03-21';
    changeTime() {
        console.log(sd.format(this.day, 'YYYY-MM-DD'));
    }
  constructor() {
      this.day = sd.format(new Date(), 'YYYY-MM-DD');
  }

  ngOnInit() {}

}

2. 通过event获取时间

1
2
3
4
5
<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" [(ngModel)]="day"
  (ionChange)="changeTime($event)"></ion-datetime>
</ion-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Component, OnInit, ViewChild } from '@angular/core';
import sd from 'silly-datetime';
@Component({
  selector: 'app-slide',
  templateUrl: './slide.component.html',
  styleUrls: ['./slide.component.scss'],
})
export class SlideComponent implements OnInit {
    day = '2019-03-21';
    changeTime(e) {
        console.log(sd.format(e.detail.value, 'YYYY-MM-DD'));
    }
  constructor() {
      this.day = sd.format(new Date(), 'YYYY-MM-DD');
  }

  ngOnInit() {}

}

5.4 日期组件的 Options

可以修改弹出的点击按钮文字，及监听事件

1
2
3
4
<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime display-format="YYYY-MM-DD" [pickerOptions]="customPickerOptions" ></ion-datetime>
</ion-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
public customPickerOptions = {
        buttons: [{
            text: '取消',
            handler: () => {
                console.log('Clicked Log. Do not Dismiss.');
                return false;
            }
        }, {
            text: '保存', handler: (e) => {
                this.day = e.year.text + '-' + e.month.text + '-' + e.day.text;
                return true;
            }
        }]
    };

return false 表示弹窗不会关闭

如果修改这个属性，上面监听方法都会失效，需要自己在handler中再写监听方法

6 侧边栏

6.1 创建侧边栏项目

创建一个侧边栏的项目

ionic start myApp3 sidemenu

side: 按钮的位置
menuId：侧边栏唯一标识
type：侧边栏弹出方式
swipe-gesture： 滑动弹出侧边栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ion-menu side="start" menuId="first">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

ion-menu-toggle 点击列表时菜单消失

1
2
3
4
5
6
7
8
9
<ion-list>
  <ion-menu-toggle>
    <ion-item>Menu Item</ion-item>
    <ion-item>Menu Item</ion-item>
    <ion-item>Menu Item</ion-item>
    <ion-item>Menu Item</ion-item>
    <ion-item>Menu Item</ion-item>
  </ion-menu-toggle>
</ion-list>

6.2 按钮控制左右菜单

在Home中添加菜单按钮

1
2
3
4
5
6
7
8
9
10
11
<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button menu="start1"></ion-menu-button>
  </ion-buttons>
  <ion-buttons slot="end">
    <ion-menu-button menu="end1"></ion-menu-button>
  </ion-buttons>
  <ion-title>
    Home
  </ion-title>
</ion-toolbar>

其中menu属性是控制哪个菜单的id

在主页配置菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 <ion-menu side="start" menuId="start1">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Start Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-menu side="end" menuId="end1">
  <ion-header>
    <ion-toolbar color="success">
      <ion-title>End Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle>
        <ion-item>Menu Item</ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

这样两个按钮就分别控制两个菜单

6.3 JS控制菜单

接上面代码，在需要控制菜单的页面导入模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
    constructor(private menu: MenuController) { }
    doOPenMenu() {
        this.menu.open('start1');
    }
    doOPenMenu2() {
        this.menu.open('end1');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button menu="start1"></ion-menu-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-menu-button menu="end1"></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-button color="primary" (click)="doOPenMenu()">打开左侧菜单</ion-button>
    <ion-button color="primary" (click)="doOPenMenu2()">打开右侧菜单</ion-button>
</ion-content>

6.4 在Tabs中使用侧边栏

在app.component.html中添加侧面菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<ion-app>
  <ion-menu side="start" menuId="start1">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>用户信息</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle>
        <ion-item [routerDirection]="root" [routerLink]="['/button']">
          button
          <ion-icon slot="start" name="home"></ion-icon>
        </ion-item>
        <ion-item [routerLink]="['/news']">
          news
          <ion-icon slot="start" name="home"></ion-icon>
        </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-menu side="end" menuId="end1">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>用户信息2</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle>
        <ion-item>我的商品</ion-item>
        <ion-item>我的商品</ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

这里一定要加main
在tab1中添加header按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button menu="start1"></ion-menu-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-menu-button menu="end1"></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button color="primary" routerLink="/button">跳转到按钮页面</ion-button>
  <ion-button color="primary" routerLink="/news">跳转到news页面</ion-button>
  <ion-button color="primary" routerLink="/product">跳转到product页面</ion-button>
</ion-content>

[routerDirection]=”root” 加上这个是在第二层先改变页面

7 Ionic高级

7.1 底部弹出action-sheet

https://ionicframework.com/docs/api/action-sheet

在html中写一个按钮

1
2
3
<ion-content>
<ion-button (click)="presentActionSheet()">弹出</ion-button>
</ion-content>

在js中首先引入ActionSheetController

1
import { ActionSheetController } from '@ionic/angular';

其次依赖注入

1
constructor(public actionSheetController: ActionSheetController) { }

再写弹出事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
async presentActionSheet() {
        const actionSheet = await this.actionSheetController.create({
            header: 'Albums', // 标题
            mode: 'ios', // 模拟平台
            buttons: [{ // 按钮们
                text: 'Delete', // 文本内容
                role: 'destructive', // 角色 （这个是删除角色，在iphon中显示红色）
                icon: 'trash', // 图标
                handler: () => { // 点击触发的方法
                    console.log('Delete clicked');
                }
            }, {
                text: 'Share',
                icon: 'share',
                handler: () => {
                    console.log('Share clicked');
                }
            }, {
                text: 'Play (open modal)',
                icon: 'arrow-dropright-circle',
                handler: () => {
                    console.log('Play clicked');
                }
            }, {
                text: 'Favorite',
                icon: 'heart',
                handler: () => {
                    console.log('Favorite clicked');
                }
            }, {
                text: 'Cancel',
                icon: 'close',
                role: 'cancel', // 这个是取消角色，显示隔行
                handler: () => {
                    console.log('Cancel clicked');
                }
            }]
        });
        await actionSheet.present();
    }

7.2 弹出黑框toast

在html中写一个按钮

1
2
<ion-button (click)="presentToast()">弹出1</ion-button>
<ion-button (click)="presentToastWithOptions()">弹出2</ion-button>

在js中首先引入ToastController

1
import { ToastController } from '@ionic/angular';

其次依赖注入

1
constructor(public toastController: ToastController) { }

再写弹出事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
async presentToast() {
        const toast = await this.toastController.create({
            message: 'Your settings have been saved.', // 弹出信息
            duration: 2000 ,// 2秒后自动关闭
            color: 'warning', // 弹出颜色
            cssClass: 'mytoast', // 样式名称（必须写在全局globa.sass）
        });
        toast.present(); // 调用
    }
    async presentToastWithOptions() {
        const toast = await this.toastController.create({
            message: 'Click to Close',
            showCloseButton: true, // 显示关闭按钮
            position: 'top', // 弹出位置
            closeButtonText: 'Done' // 按钮text
        });
        toast.present();
    }

7.3 等待loading

在html中写一个按钮

1
2
<ion-button (click)="presentLoading()">loading</ion-button>
<ion-button (click)="presentLoadingWithOptions()">loading2</ion-button>

在js中首先引入LoadingController

1
import { LoadingController } from '@ionic/angular';

其次依赖注入

1
constructor(public loadingController: LoadingController,) { }

再写弹出事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
async presentLoading() {
       const loading = await this.loadingController.create({
           message: 'Hellooo', // 提示信息
           duration: 2000 // 2秒后关闭
       });
       await loading.present(); // 执行弹出

       const { role, data } = await loading.onDidDismiss();

       console.log('Loading dismissed!');
   }

   async presentLoadingWithOptions() {
       const loading = await this.loadingController.create({
           spinner: null, // 图标（这里是不显示转圈圈）
           duration: 5000,
           message: 'Please wait...',
           showBackdrop: false, // 是否开启遮罩层
           translucent: false, // 指示器半透明效果
           cssClass: 'custom-class custom-loading' // 自定义样式（写在全局同上）
       });
       return await loading.present();
   }

7.4 弹出alert

在html中写一个按钮

1
2
3
4
5
6
<ion-button (click)="presentAlert()">Show Alert</ion-button>
<ion-button (click)="presentAlertMultipleButtons()">Show Alert (multiple buttons)</ion-button>
<ion-button (click)="presentAlertConfirm()">Show Alert (confirm)</ion-button>
<ion-button (click)="presentAlertPrompt()">Show Alert (prompt)</ion-button>
<ion-button (click)="presentAlertRadio()">Show Alert (radio)</ion-button>
<ion-button (click)="presentAlertCheckbox()">Show Alert (checkbox)</ion-button>

在js中首先引入AlertController

1
import { AlertController } from '@ionic/angular';

其次依赖注入

1
constructor(public alertController: AlertController,) { }

再写弹出事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
// 这就是一个确认按钮没有啥用
 async presentAlert() {
        const alert = await this.alertController.create({
            header: 'Alert',
            subHeader: 'Subtitle',
            message: 'This is an alert message.',
            buttons: ['OK']
        });

        await alert.present();
    }

// 这就是几个按钮没有啥用
async presentAlertMultipleButtons() {
    const alert = await this.alertController.create({
        header: 'Alert',
        subHeader: 'Subtitle',
        message: 'This is an alert message.',
        buttons: ['Cancel', 'Open Modal', 'Delete']
    });
 
    await alert.present();
}
// 可以判断点击了那个按钮
async presentAlertConfirm() {
    const alert = await this.alertController.create({
        header: 'Confirm!',
        message: 'Message <strong>text</strong>!!!',
        buttons: [
            {
                text: 'Cancel',
                role: 'cancel',
                cssClass: 'secondary',
                handler: (blah) => {
                    console.log('Confirm Cancel: blah');
                }
            }, {
                text: 'Okay',
                handler: () => {
                    console.log('Confirm Okay');
                }
            }
        ]
    });
 
    await alert.present();
}
// 可以获取弹出表单的数据
async presentAlertPrompt() {
    const alert = await this.alertController.create({
        header: 'Prompt!',
        inputs: [
            {
                name: 'name1',
                type: 'text',
                placeholder: 'Placeholder 1'
            },
            {
                name: 'name2',
                type: 'text',
                id: 'name2-id',
                value: 'hello',
                placeholder: 'Placeholder 2'
            },
            {
                name: 'name3',
                value: 'http://ionicframework.com',
                type: 'url',
                placeholder: 'Favorite site ever'
            },
            // input date with min & max
            {
                name: 'name4',
                type: 'date',
                min: '2017-03-01',
                max: '2018-01-12'
            },
            // input date without min nor max
            {
                name: 'name5',
                type: 'date'
            },
            {
                name: 'name6',
                type: 'number',
                min: -5,
                max: 10
            },
            {
                name: 'name7',
                type: 'number'
            }
        ],
        buttons: [
            {
                text: 'Cancel',
                role: 'cancel',
                cssClass: 'secondary',
                handler: () => {
                    console.log('Confirm Cancel');
                }
            }, {
                text: 'Ok',
                handler: (e) => {
                    console.log(e); // 获取表单的信息然后做点儿什么
                }
            }
        ]
    });
 
    await alert.present();
}
 // 可以获取弹出单选的数据
async presentAlertRadio() {
    const alert = await this.alertController.create({
        header: 'Radio',
        inputs: [
            {
                name: 'radio1',
                type: 'radio',
                label: 'Radio 1',
                value: 'value1',
                checked: true
            },
            {
                name: 'radio2',
                type: 'radio',
                label: 'Radio 2',
                value: 'value2'
            },
            {
                name: 'radio3',
                type: 'radio',
                label: 'Radio 3',
                value: 'value3'
            },
            {
                name: 'radio4',
                type: 'radio',
                label: 'Radio 4',
                value: 'value4'
            },
            {
                name: 'radio5',
                type: 'radio',
                label: 'Radio 5',
                value: 'value5'
            },
            {
                name: 'radio6',
                type: 'radio',
                label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
                value: 'value6'
            }
        ],
        buttons: [
            {
                text: 'Cancel',
                role: 'cancel',
                cssClass: 'secondary',
                handler: () => {
                    console.log('Confirm Cancel');
                }
            }, {
                text: 'Ok',
                handler: () => {
                    console.log('Confirm Ok');
                }
            }
        ]
    });
 
    await alert.present();
}
// 可以获取弹出多选的数据
async presentAlertCheckbox() {
    const alert = await this.alertController.create({
        header: 'Checkbox',
        inputs: [
            {
                name: 'checkbox1',
                type: 'checkbox',
                label: 'Checkbox 1',
                value: 'value1',
                checked: true
            },
 
            {
                name: 'checkbox2',
                type: 'checkbox',
                label: 'Checkbox 2',
                value: 'value2'
            },
 
            {
                name: 'checkbox3',
                type: 'checkbox',
                label: 'Checkbox 3',
                value: 'value3'
            },
 
            {
                name: 'checkbox4',
                type: 'checkbox',
                label: 'Checkbox 4',
                value: 'value4'
            },
 
            {
                name: 'checkbox5',
                type: 'checkbox',
                label: 'Checkbox 5',
                value: 'value5'
            },
 
            {
                name: 'checkbox6',
                type: 'checkbox',
                label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
                value: 'value6'
            }
        ],
        buttons: [
            {
                text: 'Cancel',
                role: 'cancel',
                cssClass: 'secondary',
                handler: () => {
                    console.log('Confirm Cancel');
                }
            }, {
                text: 'Ok',
                handler: (e) => {
                    console.log(e);
                }
            }
        ]
    });
 
    await alert.present();
}

7.5 手势事件

ionic4 中的 gestures 手势事件包括: tap, press, pan, swipe, rotate, and pinch
events 等。

在ionic4 中需要引用，而ionic3不需要引用

在移动端的click会有300毫秒的延迟，所以点击建议使用tap

1. 首先需要安装 hammerjs

npm install hammerjs –save

2. 在项目的 src/main.ts 中引入 hammerjs

import ‘hammerjs’;

  1. 在项目中使用
1
2
3
4
5
6
<ion-button (press)="doPress()">
长按触发的事件
</ion-button>
<ion-button (tap)="doTap()">
点击触发的事件
</ion-button>

说明：如果未来的 ionic4.x 版本可以直接使用手势事件的话忽略上面的安装引入过程。

8 模态对话框Modal

Modal 模态对话框主要用于登录注册页面，我们可以把它理解为从页面底部弹出的另一个页面。

8.1 创建modal

1、新建一个 model 页面以及在 model 页面下面新建一个组件。

ionic g page model

ionic g component model/component/login

2. 在 model 页面所在的模块中引入刚才创建的 login 组件，并声明

1
2
3
4
5
6
7
8
9
10
11
12
13
import { LoginComponent} from './component/login/login.component';

// 引入组件
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ModelPage, LoginComponent],
    entryComponents: [LoginComponent]
})

3. 在 modal 页面中引入刚才创建的 login 组件，并且引入 ModalController 弹出模态对话框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { LoginComponent} from './component/login/login.component';
@Component({
  selector: 'app-model',
  templateUrl: './model.page.html',
  styleUrls: ['./model.page.scss'],
})
export class ModelPage implements OnInit {

  constructor(public modalController: ModalController) { }
    async presentModal() {
        const modal = await this.modalController.create({
            component: LoginComponent,
            componentProps: { value: 123 }
        });
        return await modal.present();
    }
  ngOnInit() {
  }

}

8.2 Modal传值

1、modal 页面在 componentProps 中给弹出的组件页面传值

1
2
3
4
5
6
7
8
constructor(public modalController: ModalController) { }
    async presentModal() {
        const modal = await this.modalController.create({
            component: LoginComponent,
            componentProps: { value: 123 }
        });
        return await modal.present();
    }

2、弹出的组件页面通过 NavParams 接受 modal 页面的传值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component, OnInit , Input} from '@angular/core';
import { NavParams } from '@ionic/angular';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {

  @Input() aid: any;
  constructor(public navParams: NavParams) {
      console.log(this.navParams);
  }

  ngOnInit() {}

}

8.3 关闭Modal时传值

1. modal 监听关闭事件

1
2
3
4
5
6
7
8
9
10
async presentModal() {
        const modal = await this.modalController.create({
            component: LoginComponent,
            componentProps: { aid: '123' }
        });
        await modal.present();
        //监听销毁的事件
        const { data } = await modal.onDidDismiss();
        console.log(data);
    }

2. Login 组件关闭的时候传入数据

1
<ion-button (click)="closeModel()">关闭对话框</ion-button>
1
2
3
4
closeModel() {
        this.navParams.data.modal.dismiss({
            'result': '消失的时候返回的内容' });
    }

最后更新： 2019年04月14日 08:12

原始链接： http://linjiad.github.io/2019/04/02/ionic-02/

赏
× 请我吃糖~
打赏二维码