如何达到获取焦点时动态显示更多选项的效果

ybtianyu 发布于 2019/08/08 20:30
阅读 116
收藏 0

11月25日16点LF开源软件学园为您带来企业拥抱开源101入门公开课>>>

页面有个<ion-header>部分,里面有个文本框,希望的效果是当文本框获取焦点的时候,在文本框下面显示更多的选项,文本框和更多选项都是放在<ion-header>里的。页面除了显示页面头,还有<ion-content>内容

我的做法:文本框添加获取焦点事件(ionFocus)="focusSearchInput()"

focusSearchInput()

{

this.bfocusSearch = true;

}

然后html里

<div *ngIf="bfocusSearch==true">

显示更多选项

</div>

实际运行时,初始时文本框没有焦点,页面头下面紧接着显示<ion-content>。当文本框获取焦点,更多选项显示了出来,同时页面头的长度也往更长了一些。但是页面头下面的<ion-content>内容仍然是从原先的位置显示的,被拉长的页面头遮挡了一些,而不是从新的位置开始显示。

怎么解决这个问题呢,这个效果还有其他解决办法吗?

加载中
0
ybtianyu
ybtianyu

难道不应该放在ion-header里?

0
ybtianyu
ybtianyu

只有获取焦点后跳转到新页面了

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部