html - 我遇到了一些问题标签和标签
问题描述
我在使用这些标签时遇到了一些问题,我尝试创建一个使用卡片显示一些课程(可点击)的应用程序已经有 4 天了。问题是,当我将东西分别放在 ion-content 标签中时,消失了!同时,当我把它们放进去时,谈论标签栏的问题来了,事实上它并没有粘在底部,即使我使用“slot='bottom'”。我放了一些代码给你看。你能给我一些提示来提升我的离子和角度技能吗?那些将不胜感激。
主页.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>
主页.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");
}
}
主页.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;
}
解决方案
我知道这是一个 4 个月大的问题,但我在查看其他内容时发现了它。
我认为你已经解决了你的问题,但是对于未来看到这个的人来说,这里有一些帮助:
当你使用时<ion-tabs>
,它的内容会显示在 . 您需要做的只是使用您的<ion-tabs>
内部<ion-content>
并创建一个组件来显示您的页面作为您的第一个选项卡。
这里有一些来自离子文档的例子:
https://ionicframework.com/docs/api/tabs#usage
不要忘记选项卡组件的角度路由配置: https ://ionicframework.com/docs/api/tabs#router-integration
推荐阅读
- c# - 尝试移动数组中的元素而不是替换元素
- android - Android Studio 3.2.1、Oreo Target、CPU Monitor/Profiler:错误采样/大幅减速
- arrays - 使用不同维度的向量创建矩阵
- node.js - 如何从服务器请求在客户端上执行特定软件
- android - 从本地备份文件恢复 Room 数据库,LiveData ViewModel 不刷新
- prolog - 为什么不统一?序言
- firebase - 有没有办法改变 react-native-firebase 中的删除通知声音(后台和关闭的应用程序,而不是前台)?
- azure-devops - 部署前条件:如果测试部署成功,则部署到 prod
- c# - 元素出现在数组中的频率。代码有效,但正在寻找更好的答案
- bash - bash 在 echo -e 格式化文本上使用列