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

浏览:30日期:2023-01-19

问题描述

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>

问题解答

回答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>

相关文章: