离子4离子选择弹出位置

Question

我正在使用具有属性ion-select的{​​{1}}。 弹出框正在interface="popover"下面打开，这使得弹出框非常小。

我发现，如果select中有10个或更多项目，它会向下打开，而少于10个项目，它将计算出哪种打开方式，具体取决于{ {1}}输入。

如何设置弹出窗口在ion-select上方打开？

来源在select下面打开的屏幕截图（错误的方式）：

在select上方打开联系方式的屏幕截图（正确方式）：

Answer 1

当interface="popover"是这样时，Ionic 4在这里使用ion-popover组件。作为Ionic 4.x版本，没有内置的东西可以放置此窗口。因此，您需要覆盖核心行为。为此，请将代码段添加到页面的CSS文件中。

.popover-wrapper .popover-content{
    position: relative !important;
    margin: 0 auto !important;
    left: auto !important;
    top: auto !important;
}

Answer 2

您需要指定点击事件，并在presentPopover方法中使用它

模板：

<your-element (click)="presentPopover($event)"></your-element>

组件：

async presentPopover(event: any) {
    const popover = await this.popoverController.create({
        component: PopoverComponent,
        event
    });

    return await popover.present();
}