html:
在html部分 我设定每页显示5.6个slide: slidesPerView="5.6"
因为做的是点击效果不是滑动选择效果 ,所以 使用了ionSlideTap(点击) 方法而不是 ionSlideDidChange(滑动改变选中)方法
<ion-slides class="trendTabs" (ionSlideTap)="slideTap($event)" slidesPerView="5.6">
<ion-slide>
<div class="tab-text">整体健康</div>
</ion-slide>
<ion-slide>
<div class="tab-text">舌色</div>
</ion-slide>
<ion-slide>
<div class="tab-text">舌形</div>
</ion-slide>
<ion-slide>
<div class="tab-text">舌苔</div>
</ion-slide>
<ion-slide>
<div class="tab-text">苔色</div>
</ion-slide>
<ion-slide>
<div class="tab-text">苔形</div>
</ion-slide>
</ion-slides>
ts部分: 使用ev来定位点击选中的slide。得到选中的slide值。然后利用slideTo方法转向改选中slide。后面的参数设为0,更贴近点击选中。而不是滑动。
slideTap(ev){
let currentIndex = ev.clickedIndex;
this.slides.slideTo(currentIndex, 0);
this.getTrendData()
console.log('Current index is', currentIndex);
}
2.解决滑动时的选中
<ion-slides class="trendTabs" slidesPerView="5.6" (ionSlideTap)="slideTap($event)" (ionSlideWillChange)="slideChanged($event)" >
slideChanged(ev){
this.slides.slideTo(this.slideIndex, 0);
}