angular.js - ionic tabs 模板如何在header中显示搜索框-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

angular.js - ionic tabs 模板如何在header中显示搜索框

ringa_lee 2017-05-15 16:59:25

[AngularJS讨论组]

929

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>

ringa_lee

全部回复(1)

曾经蜡笔没有小新2017-05-15 17:01:25 1楼

<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-pider">
            搜索历史
        </ion-item>
        <ion-item>
            xxx
        </ion-item>
        <ion-item>
            xxx
        </ion-item>
    </ion-list>
</ion-content>

</ion-view>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>