zoukankan      html  css  js  c++  java
  • 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
              }
            ]
          }
        ];
      }
    }

    喜欢的话,请点赞,转发、收藏、评论,谢谢!
  • 相关阅读:
    d3.js--04(enter和exit)
    d3.js--03(增删改查)
    d3.js--02(data和datum原理)
    css文件和js文件后面带一个问号----2015-1103
    json_decode()和json_encode()区别----2015-0929
    随记--更新于20150925
    个人火狐插件汇总--20150924
    『jQuery』.html(),.text()和.val()的概述及使用--2015-08-11
    矩阵求导
    傅里叶变换
  • 原文地址:https://www.cnblogs.com/johnjackson/p/12604683.html
Copyright © 2011-2022 走看看