angular.js - ionic tabs 模板 如何在header中显示搜索框
本文介绍了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屋!
查看全文