• ion-picker组件示例(ionic4),这个组件有样式错乱的问题


    Ionic4的官方文档中关于ion-picker组件没有给出相应的示例代码,但是其右上角效果展示的地方下边有一个github的示例代码连接,这个代码不是标准的ionic项目结构,但使用原理是一样的,这里我修改成ionic项目的写法:

    HTML:

    <ion-button expand="block" (click)="openPicker()">点击</ion-button>

    JavaScript:

    import { Component, OnInit } from '@angular/core';
    import { PickerController } from '@ionic/angular';
    
    @Component({
      selector: 'app-edit',
      templateUrl: './edit.page.html',
      styleUrls: ['./edit.page.scss'],
    })
    export class EditPage implements OnInit {
    
      constructor(private pickerController: PickerController) { }
    
      ngOnInit() {
      }
    
      public async openPicker() {
        const picker = await this.pickerController.create({
          columns: this.getColumns(),
          buttons: [
            {
              text: '取消',
              role: 'cancel'
            },
            {
              text: '确定',
              handler: (value) => {
                console.log(`${value['col-0'].text}`);
              }
            }
          ]
        });
    
        await picker.present();
      }
    
      private getColumns() {
        // ion-pick 有个问题,create方法接收的参数中columns 不能直接给对象字面量,必须每次调用create时动态创建一个新对象,即时将这个对象保存为组件对象的属性xxx,这里通过return this.xxx,这样的方式也不行,会导致第二次打开时样式不正常。
        return [
          {
            name: 'col-0',
            options: [
              {
                text: "选项1",
                value: 0
              },
              {
                text: "选项2",
                value: 1
              },
              {
                text: "选项3",
                value: 2
              }
            ]
          }
        ];
      }
    }

    喜欢的话,请点赞,转发、收藏、评论,谢谢!
  • 相关阅读:
    拉格朗日插值
    文档 所有空格变为Tab
    windows 计算器
    map 结构体
    插入图片 图片地址
    扩展中国剩余定理
    欧拉定理、欧拉函数、a/b%c
    hdu1033Defragment
    Minimum Inversion Number_线段树||树状数组
    hdu1166敌兵布阵_线段树单点更新
  • 原文地址:https://www.cnblogs.com/johnjackson/p/12604683.html
Copyright © 2020-2023  润新知