angular.js - 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>

这篇关于angular.js - ionic tabs 模板 如何在header中显示搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！