首页 > ionic tabs 模板 如何在header中显示搜索框

ionic tabs 模板 如何在header中显示搜索框

ionic新手,我使用inoic tabs 模板。
做一个搜索界面时,想在头部显示搜索框,该如何操作,

我在搜索界面的 <ion-view> 设置属性 hide-nav-bar="false",
并且新添加了 <ion-nav-bar> 来显示搜索header。
这样的操作有两个问题,一个是 <ion-content> 位置在顶部,被新的<ion-nav-bar>盖住,
另一个问题是刚刷新的时候,会显示原始的<ion-nav-bar>,然后被隐藏掉,再显示新的<ion-nav-bar>。

请问我想在头部显示搜索框,正确的方式应该是如何处理。

描述的可能不太清楚,非常抱歉。


补充一个问题,
index页面

    <ion-nav-bar class="bar-assertive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>

如何在其他页面替换 <ion-nav-bar>


<ion-view>

<ion-nav-title>
    <ion-header-bar class="item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="Search" ng-model="searchContent">
        </label>
        <button class="button button-clear">
            取消
        </button>
    </ion-header-bar>
</ion-nav-title>
<ion-content>
    <ion-list>
        <ion-item class="item-divider">
            搜索历史
        </ion-item>
        <ion-item>
            xxx
        </ion-item>
        <ion-item>
            xxx
        </ion-item>
    </ion-list>
</ion-content>

</ion-view>

【热门文章】
【热门文章】