如果我有不同的幻灯片,我的离子幻灯片内容高度有问题。我已将高度设置为自动但如果我更改为另一个幻灯片高度则不会重置。
<ion-slides #pageSlider (ionSlideWillChange)="changeWillSlide($event)" style="height:auto">
<ion-slide>
<h1>ContentTab 1</h1>
<h1>ContentTab 1</h1>
<h1>ContentTab 1</h1>
some more content....
</ion-slide>
<ion-slide>
<h1>ContentTab 1</h1>
<h1>ContentTab 1</h1>
some more content....
</ion-slide>
<ion-slide>
<h1>ContentTab 1</h1>
some more content....
</ion-slide>
</ion-slides>
这是查看项目的链接
https://stackblitz.com/edit/ionic-gyfjks?file=pages%2Fhome%2Fhome.html
请帮我解决这个问题。
答案 0 :(得分:0)
[重复Ionic - how to slide ion-segments?
简单易用的逻辑甚至只存在于html中,不需要JS自定义代码。您可以实现监听1个变量segment
工具栏:绑定到片段,并收听ionChange
<ion-toolbar>
<ion-segment (ionChange)="slides.slideTo(segment)" [(ngModel)]="segment" color="warning">
<ion-segment-button value="0">
<ion-icon name="person"></ion-icon>
</ion-segment-button>
<ion-segment-button value="1">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
离子幻灯片: 捕获幻灯片事件,将片段分配给当前活动索引
<ion-slides #slides (ionSlideWillChange)="segment=''+slides.getActiveIndex()">
<ion-slide>
profile,
hello <span *ngIf="this.userProvider.userData">{{this.userProvider.userData.name}}</span>
</ion-slide>
<ion-slide>
second
</ion-slide>
<ion-slide>
third
</ion-slide>
</ion-slides>