如何在 ionic 3 中创建下拉组件

Posted 2023-02-23

【中文标题】如何在 ionic 3 中创建下拉组件

【英文标题】：How to create dropdown component in ionic 3

【发布时间】：2017-12-15 07:25:27

【问题描述】：

首先让我说我是 ionic 新手，我尝试在 Google 中找到我的解决方案，但现在信息与 ionic 1、ionic 2 和现在的“ionic 3”混合在一起。

我需要做一个下拉菜单，我称之为“创建方法”，带有参数，这个方法绘制带有选项的菜单。

我测试了不同的方法，首先尝试修改弹出窗口，然后是模态框，但我无法解决我的问题。

我需要知道这样做的最佳形式，我认为我应该制作外部组件并使用他的方法来做我想做的事。到目前为止，我使用的是 Sencha Touch，我使用此代码：

    Ext.create("Amix.view.general.Menu",
        options : options,
        callback : callback
    );

    Ext.define('Amix.view.general.Menu',
        extend: 'Ext.panel',

        ...

        listeners: 
                
            initialize: function()
              
               Ext.Viewport.add(this);
             
               ...

这就是我想要的：

另外，选择 DOM 项目的最佳形式是什么？在 sencha 中，我使用 Ext.getCmp() 或 Ext.select()，在 jQuery 上使用 $()，在 javascript 上使用 document.queryselector。

【参考方案1】：

根据您的屏幕截图，您需要 ionic Popover。对于 Ionic 2.x 和 3.x 有内置组件由 ionic Popover

您可以使用它简单地导入您的页面

import  PopoverController  from 'ionic-angular';

@Component()
class MyPage 
  constructor(public popoverCtrl: PopoverController) 

  presentPopover(myEvent) 
    let popover = this.popoverCtrl.create(PopoverPage);
    popover.present(
      ev: myEvent
    );
  

查看演示here

【讨论】：

回答问题，我第一次使用 Popover 但我的问题是我需要菜单从顶部开始出现，我尝试修改样式但 ionic 2 自动创建样式并且我无法修改动画

什么风格不能更新？在那里你可以使用页面 scss 页面 css，app.scss 全局 css 更新。

离子会议应用程序有关于页面的弹出窗口示例。 github.com/ionic-team/ionic-conference-app/tree/master/src/…

我知道我用 app.scss 改变了样式，但我想改变 z-Index 因为菜单出现在标题工具栏后面，我也想改变顶部来做动画，离子 3 放默认样式。再次感谢

如果我使用弹出框会发生这种情况：ibb.co/gjcdpa 当我为弹出框设置动画时，它会越过标题:(