我在使用 标签和 标签

Question

我在使用这些标签时遇到了一些问题，已经有4天的时间，我试图创建一个使用卡片显示某些课程（可点击）的应用。问题是，当我将东西分别放入离子含量标签时，消失了！同时，当我把它们放进去时，出现了有关标签栏的问题，实际上，即使在我使用“ slot ='bottom'”的情况下，它也不会粘在底部。我放一些代码给你看。您能给我一些技巧来提高我的离子和角度技能吗？这些将不胜感激。

home.page.html

<ion-header>
    <ion-nav>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Bacheca corsi</ion-title>
    </ion-nav>
</ion-header>

<ion-content>
  <div class="corsi-consigliati" *ngIf="corsi.length">
    <ion-slides pager>
      <ion-slide *ngFor="let corso of corsi" (click)="apriCorso(corso)">

        <img [src]="corso.immagine"/>
        <div class="corso-titolo" text-wrap>{{corso.nome}}</div>

      </ion-slide>  
    </ion-slides>
  </div>
  <ion-grid fixed>
    <ion-row class="singolaMattonella ion-justify-content-start">

      <ion-col class="doppiaMattonella"  *ngFor="let i of corsi"  size="5" size-xs="6" size-sm="5" size-md="4" size-lg="3">
        <ion-card (click)="apriCorso(i)">
          <img [src]="i.immagine"/>
          <ion-card-content class="scritto">
            <h5 text-nowrap text-center>
              {{i.nome}}
            </h5>
          </ion-card-content>
        </ion-card>
      </ion-col>

    </ion-row>
  </ion-grid>

  <ion-tabs>
    <ion-tab-bar slot="bottom">

      <ion-tab-button tab="Profilo">
        <ion-icon name="contact"></ion-icon>
        <ion-label>Account</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="Corsi">
        <ion-icon name="book"></ion-icon>
        <ion-label>Corsi</ion-label>
      </ion-tab-button>


      <ion-tab-button tab="Notizie">
        <ion-icon name="people"></ion-icon>
        <ion-label>Bacheca</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="Preferiti">
        <ion-icon name="heart"></ion-icon>
        <ion-label>Preferiti</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="Impostazioni">
        <ion-icon name="cog"></ion-icon>
        <ion-label>Impostazioni</ion-label>
      </ion-tab-button>

    </ion-tab-bar>
  </ion-tabs>
</ion-content>

home.page.ts

import { Component } from '@angular/core';
import { Corso } from '../corsi';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  corsi: Corso[] = [ // array di corsi prendendo come interfaccia il model corsi.ts
    new Corso(1, "Eipass Basic", "Certificazione Informatica", 15, 15, "assets/images/cucinaThai.jpg", "prova1", "o"),
    new Corso(2, "Eipass Basic 7 Moduli User", "Certificazione Informatica", 15, 15, "assets/images/cucinaThai.jpg", "prova1", "o"),
    new Corso(3, "Eipass Progressive", "Certificazione Informatica", 15, 15, "assets/images/cucinaThai.jpg", "prova1", "o"),
    new Corso(4, "Master Io livello", "Master Universitario", 5, 5, "assets/images/python.jpg", "prova2", "f"),
    new Corso(5, "Master IIo livello", "Master Universitario", 5, 5, "assets/images/python.jpg", "prova2", "f"),
    new Corso(6, "Inglese", "Certificazione Linguistica", 5, 5, "assets/images/python.jpg", "prova2", "f")
  ];//i tipi di corso sono 3

  constructor(nav: NavController) {}

  apriCorso(i){
    alert("ciao");
  }
}

home.page.scss

.iniziale .corsi-consigliati {
    position: relative;
  }

  .iniziale .corsi-consigliati .corso-titolo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    text-align: left;
    height: 60px;
  }

  .iniziale .doppiaMattonella:not(:last-child) ion-col {
    width: 50%;
  }

  .iniziale .singolaMattonella ion-card {
    width: 100%;
    margin: 0px;
  }

  .iniziale .singolaMattonella ion-card img {
    max-height: 150px;
    -o-object-fit: cover;
    object-fit: cover;
  }

Answer 1

我知道这是一个4个月大的问题，但是我在看别的东西时发现了。

我认为您自提出要求以来就解决了您的问题，但是对于以后的人们来说，这里有一些帮助：

使用<ion-tabs>时，其内容显示在中的所有内容之上。您只需要在<ion-tabs>内使用<ion-content>并创建一个显示页面的组件即可作为您的第一个标签。

这里有一些离子文件的例子：

https://ionicframework.com/docs/api/tabs#usage

不要忘记选项卡组件的角度布线配置：https://ionicframework.com/docs/api/tabs#router-integration