Question

未显示选项卡，但是html代码中确实存在该代码


customElements.define('app-tabs',class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <ion-tabs>

  <ion-tab tab="tab-schedule">
    <ion-nav></ion-nav>
  </ion-tab>

  <ion-tab tab="tab-speaker">
    <ion-nav></ion-nav>
  </ion-tab>

  <ion-tab tab="tab-map" component="page-map">
    <ion-nav></ion-nav>
  </ion-tab>

  <ion-tab tab="tab-about" component="page-about">
    <ion-nav></ion-nav>
  </ion-tab>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab-schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="tab-speaker">
      <ion-icon name="contacts"></ion-icon>
      <ion-label>Speakers</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab-map">
      <ion-icon name="map"></ion-icon>
      <ion-label>Map</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab-about">
      <ion-icon name="information-circle"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>
    `;


  }
});

function init() {
  const nav = document.querySelector('ion-nav');
  nav.componentOnReady();
  console.log('pasa')
  nav.root = 'app-tabs';
}

document.body.onload = init();


<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Ionic JavaScript Starter</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
  <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
  <script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
  <script src="src/index.js"></script>
</head>

<body>
<ion-app> 
    <ion-nav></ion-nav>
</ion-app>
</body>
</html>

此代码适用于离子4.0.1，但不适用于最新的4.4.1。这是一个存储库https://github.com/techiediaries/ionic-javascript-starter的示例，并且该示例似乎已通过ionic 4.0.1进行了测试，但未通过最新版本进行测试

离子4香草未显示标签

0 个答案: