效果图
Step 1 要使用的ts文件代码
import { Component, OnInit } from '@angular/core';
import { NavController, PickerController } from '@ionic/angular';
import { PickerOptions } from '@ionic/core';
@Component({
selector: 'app-searchcondition',
templateUrl: './searchcondition.page.html',
styleUrls: ['./searchcondition.page.scss'],
})
export class SearchconditionPage implements OnInit {
public period = 'period';
constructor(
private navCtl: NavController,
private pickCtl: PickerController,
) { }
ngOnInit() {
}
public onDone() {
this.navCtl.back();
}
public async pickPeriod() {
const opts: PickerOptions = {
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Confirm',
handler: (v) => {
this.period = v['periodType'].value;
}
}
],
columns: [
{
name: 'periodType',
options: [
{text: 'open', value: 'open'},
{text: 'close', value: 'close'},
{text: 'period', value: 'period'},
]
}
]
};
const picker = await this.pickCtl.create(opts);
picker.present();
}
public async pickShift() {
}
}
Step 2 html里加入
<ion-item-group>
<ion-item-divider class="itemg">
<ion-label>Period Type</ion-label>
</ion-item-divider>
<ion-item class="dateLabel" (click)="pickPeriod()" detail>
<ion-label>{{ period }}</ion-label>
</ion-item>
</ion-item-group>
ok..试一下吧