Question

我尝试使用离子导航按钮进行页面视图。

这是我的代码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>

为什么我的后退按钮内容为隐藏类？

Answer 1

这是因为这是内置Ionic后退按钮的默认设置。他们已经内置了这个功能，因此您不必自己完成所有编程。只有当您可以选择返回页面时，此按钮才会显示。

因此，我们假设您有一个列表，当您点击某个项目时，会打开一个新页面，其中包含有关该项目的所有信息。在该页面上，后退按钮将显示，因为您可以返回页面。

如果您只想要一个带有后退图标的按钮，请访问www.ionicons.com。您可以使用其中一个只有一个普通按钮。

离子离子导航后退按钮被隐藏

1 个答案: