Question

我是Ionic的新手，我正在尝试使用Ionic框架向我的项目添加箭头。我正在使用如下简单代码：

<ion-header-bar class="bar-stable"> 
    <ion-nav-back-button class="button-clear">
        <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
    <h1 class="title">Title of my project</h1>
</ion-header-bar>

但是我无法在任何地方看到Ionic后退按钮。

Answer 1

这里有一些代码用于离子中的标题。

<ion-view>
<ion-nav-bar>
    <ion-nav-buttons side="left">
        <button class="button button-clear  ion-arrow-left-c  " ng-click="backButton()"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button button-clear btn-white ion-android-settings header-icon-size " ng-click="openDrawer()"></button>
    </ion-nav-buttons>
</ion-nav-bar>
<ion-content>
    <!-- here content -->
</ion-content>
</ion-view>

Answer 2

<ion-header style="background-color: #D3D3D3;box-shadow: none;">
  <ion-navbar>
    <ion-title>
      <ion-row no-padding>
        <ion-col no-padding>
            <ion-buttons left>
                <button ion-button icon-only (click)="back()">
                    <ion-icon name="arrow-back"></ion-icon>
                </button>
            </ion-buttons>
        </ion-col>
        <ion-col>
          <div style="text-align: center;font-size: 20px; margin-top: 5px;">
            Training Reports
          </div>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>


    </ion-title>
  </ion-navbar>
</ion-header>

Answer 3

ion-nav-back-button 仅在您的导航堆栈上推送超过一页时显示。

以下代码通过显示一个页面，然后在 2 秒后将同一页面推送到导航堆栈上来展示这一点。在第一页中，后退箭头不显示，但它显示在第二页上，按它返回第一页。结果可以在this JSFiddle that I created（包含相同的代码）中测试。

HTML：

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

<ion-app>
<ion-nav root='nav-page'></ion-nav>
</ion-app>

Javascript：

customElements.define(
 'nav-page', class NavPage extends HTMLElement
{
  connectedCallback() {
    this.innerHTML = `
      <ion-header translucent>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button defaultHref="/">
            </ion-back-button>
          </ion-buttons>
          <ion-title>
            Page ${this.data ? this.data.page : 0}
          </ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content fullscreen>
        Page ${this.data ? this.data.page : 0}
      </ion-content>
    `;
  }
});
    
const nav = document.querySelector('ion-nav');
let data = { page: 1 };
    
setTimeout(function() {
  nav.push('nav-page', { data });
}, 2000);

在离子的后箭头按钮

3 个答案: