我在使用这些标签时遇到了一些问题,已经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;
}
答案 0 :(得分:0)
我知道这是一个4个月大的问题,但是我在看别的东西时发现了。
我认为自您提出问题以来,您就解决了问题,但是对于以后的人们来说,这里有一些帮助:
使用<ion-tabs>
时,其内容显示在中的所有内容之上。您只需要在<ion-tabs>
内使用<ion-content>
,然后创建一个组件即可显示您的页面即可作为您的第一个标签。
以下是离子文件中的示例:
https://ionicframework.com/docs/api/tabs#usage
不要忘记选项卡组件的角度布线配置: https://ionicframework.com/docs/api/tabs#router-integration