Ionic 离子离子导航返回按钮隐藏

brqmpdu1 于 2023-02-27 发布在 Ionic

关注(0)|答案(2)|浏览(186)

我尝试用离子导航后退按钮进行页面查看。
这是我的代码html。

<ion-nav-bar class="bar-main">
  

    <ion-nav-back-button class="button-clear" side="left">
        <ion-icon name="edit" role="img" class="ion-arrow-left-c menu-icon" arial-label="back">

        </ion-icon>
    </ion-nav-back-button>
    
      <ion-nav-buttons side="right">
        <button class="button button-clear" ui-sref="editevent( { idevent : event.$id } )">

            <ion-icon name="edit" role="img" class="ion-edit menu-icon" arial-label="edit">

            </ion-icon>
        </button>
    </ion-nav-buttons>
    

   
</ion-nav-bar>

<ion-view  class="content">
    <ion-nav-title>{{event.title}}</ion-nav-title>
    <ion-content class="background-white">
        <div class="event_view-desc" >{{event.description}}</div>
             

</ion-content>
</ion-view>

但是这个页面没有显示导航按钮，我是不是搞错了？
生成的代码html是：

<ion-header-bar class="bar-main bar bar-header" align-title="center"><button class="button back-button buttons hide button-clear header-item" side="left" ng-click="$ionicGoBack()" style="transition-duration: 0ms;">
            <ion-icon name="edit" role="img" class="ion-arrow-left-c menu-icon" arial-label="back">

            </ion-icon>
        <span class="back-text" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"><span class="default-title">Back</span><span class="previous-title hide"></span></span></button><div class="title title-center header-item" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); left: 36px; right: 36px;"><span class="nav-bar-title ng-binding">geo3</span></div><div class="buttons buttons-right header-item" style="transition-duration: 0ms;"><span class="right-buttons">
            <button class="button button-clear" ui-sref="editevent( { idevent : event.$id } )" href="#/editevent/-KDScn4Yw3uEryrNT8ow">

                <ion-icon name="edit" role="img" class="ion-edit menu-icon" arial-label="edit">

                </ion-icon>
            </button>
        </span></div></ion-header-bar>

为什么我的后退按钮内容是hide类？

ionic-framework

来源：https://stackoverflow.com/questions/36155296/ionic-ion-nav-back-button-is-hidden

2条答案

按热度按时间

lvmkulzt1#

这是因为这是Ionic默认的内置后退按钮。他们内置了这个功能，所以你不必自己做所有的编程。这个按钮只有在你有返回页面的选项时才会显示。
假设你有一个列表，当你点击一个项目时，会打开一个新页面，里面有关于这个项目的所有信息，在这个页面上，后退按钮会出现，因为你可以返回到一个页面。
当你只想要一个带有后退图标的按钮时，可以访问www.ionicons.com，你可以使用其中一个带有普通按钮的按钮。

赞(0）回复(0）举报 2023-02-27

wydwbb8l2#

正如Jur Clerkx所说，后退按钮是多余的。
对于你的离子导航条，它使用离子头和离子工具栏来完成同样的事情。

<ion-header [translucent]="true">
   <ion-toolbar>
      <ion-buttons slot="start">
         <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-buttons slot="end">
         <ion-button class="button button-clear" ui-sref="editevent( { idevent : event.$id } )">
           <ion-icon name="edit" role="img" class="ion-edit menu-icon" arial-label="edit">
           </ion-icon>
         </ion-button>
      </ion-buttons>
      <ion-title>{{event.title}}</ion-title>
   </ion-toolbar>
</ion-header>

开始插槽也会使您的按钮显示在左边，结束插槽会使按钮显示在右边。
有关离子工具栏here的详细信息。

赞(0）回复(0）举报 2023-02-27

我来回答

Ionic 离子离子导航返回按钮隐藏

2条答案

相关问题

热门标签

最新问答