离子导航返回按钮和菜单按钮一起显示
Posted
技术标签:
【中文标题】离子导航返回按钮和菜单按钮一起显示【英文标题】:Ionic nav-back-button and menu button showing together 【发布时间】:2015-03-10 10:28:19 【问题描述】:我尝试让菜单按钮在后退按钮显示时不显示。有没有办法让 Ionic 解决这个问题?还是由我决定?
例如,如果我使用 ui-sref 从 app.users 转到 app.users.add 或 app.users.details,我希望隐藏菜单按钮并显示后退按钮,但它们都显示当我去嵌套视图时。示例:
<button class="button button-positive" ui-sref="app.users.details(id:user.id)"> User details </button>
app.js
.config(function($stateProvider, $urlRouterProvider)
$stateProvider
.state('app',
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
//controller: 'AppCtrl'
)
.state('app.users',
url: '/users',
views:
'menuContent@app' :
controller: 'UsersCtrl',
templateUrl: 'templates/users.html'
)
.state('app.users.add',
url: '/addUsers',
views:
'menuContent@app' :
controller: 'AddUserCtrl',
templateUrl: 'templates/add_user.html'
)
.state('app.users.details',
url: '/userDetails/:id',
views:
'menuContent@app' :
controller: 'UserDetailsCtrl',
templateUrl: 'templates/details_user.html'
)
menu.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear">
<i class="icon ion-ios7-arrow-forward"></i> back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>
</ion-pane>
<ion-side-menu side="right">
<header class="bar bar-header bar-stable">
<h1 class="title">Title</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.users">
Users
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.users.add">
New user
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
我的观点结构是这样的:
<ion-view title="Title">
<ion-nav-buttons side="right">
<button menu-toggle="right"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
...
View Content
...
</ion-content>
</ion-view>
【问题讨论】:
【参考方案1】:在 beta 14 中,默认情况下由 ionic 完成。您也可以通过此属性切换。
<ion-side-menus enable-menu-with-back-views="false">
Relative Codepen Sidemenu Starter Project Sidemenu Docs
【讨论】:
是否有可能覆盖每个视图的这种行为?【参考方案2】:也可以从子页面覆盖它,只需在子模板中添加 ion-side-menus 指令:
<ion-side-menus enable-menu-with-back-views="true"></ion-side-menus>
<ion-view view-title="My Child page">
<ion-content>
<h1>HEY</h1>
</ion-content>
</ion-view>
这将在您添加到 menu.html 模板中的子页面内添加完整的导航栏(ion-nav-bar)(根据上面的示例)
【讨论】:
【参考方案3】:在需要菜单按钮的html页面上放置带有菜单按钮的导航栏,在需要返回按钮的页面上放置带有返回按钮的导航栏。
像这样,我需要主页上的菜单,所以用菜单按钮将导航栏放在主页上
<ion-view title="home">
<ion-nav-bar class="bar-stable main-header-nav home-page">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu- toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content></ion-content>
</ion-view>
我需要收件箱页面上的后退按钮,所以在收件箱页面上使用带有后退按钮的导航栏
<ion-view title="">
<ion-nav-bar class="bar-stable main-header-nav home-page">
<ion-nav-back-button class="button-clear go-back">
</ion-nav-back-button>
</ion-nav-bar>
<ion-content></ion-content>
</ion-view>
【讨论】:
【参考方案4】:我在 2019 年解决了将属性 "menuToggle" 添加到 Button 的问题。这告诉 Ionic/Angular 该按钮的功能是“Hamburguer 按钮”,因此,Angular 会在显示“后退箭头按钮”时理解并隐藏它。
<button menuToggle ion-button icon-only (click)="btnHamburger()">
<ion-icon name="menu"></ion-icon>
</button>
【讨论】:
以上是关于离子导航返回按钮和菜单按钮一起显示的主要内容,如果未能解决你的问题,请参考以下文章