ionic4|5 使用PickerController 组件

梦里梦外; 2023-07-24 08:53 20阅读 0赞

### 效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70][]

### 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..试一下吧

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70]: /images/20230528/0736ac620e5b43f7b64543b551f92e07.png