我正在制作一个电子商务应用程序。在我的主页上,我按类别显示我的产品。我同时使用 ion-segment 和 ion-slides,这样用户就可以同时滚动和选择两者。当我有三个类别时很好,所有类别都在家里显示,但是当我增加类别时,其他类别在屏幕后面。类别产品显示正常,但类别名称在内部且不可见。我想滚动同时显示在屏幕上的类别名称和产品。那就是我想让事件片段在屏幕上可见,当片段不在屏幕上时。提前致谢:-)
<ion-content>
<ion-segment color="dark" [(ngModel)]="tabs" style="width:640px;">
<ion-segment-button *ngFor="let i of productcategory" (click)="selectTab(i)" value="{{i.inc}}" >{{i.category_name}}</ion-segment-button>
<div id="slide" class="slide"></div>
</ion-segment>
<ion-slides #pageSlider (ionSlideWillChange)="changeWillSlide($event)">
<ion-slide *ngFor="let i of productcategory">
<ion-list>
<div *ngFor="let pr of products; let i=index" text-wrap class="swipe-tabs">
<div class="swipe-tabs-1">
<img src="http://example.com/{{pr.tbl_product_image}}" />
<button ion-button (click)="removefromcart(pr,i)">-</button>
<button ion-button color="light" *ngIf="check">{{quan[i]}}</button>
<button ion-button color="light" *ngIf="!check">0</button>
<button ion-button (click)="addToCart(pr,i)">+</button>
</div>
<div class="swipe-tabs-2">
<h2>{{pr.tbl_product_name}} </h2>
<ion-list radio-group >
<ion-item *ngFor="let p of pr.pricevariant; let j=index;">
<ion-label>{{p.weight}} <span class="colr-red">₹ {{p.dprice}}</span></ion-label>
<ion-radio [value]="p.weight" (ionSelect)="getdata(pr,p,i,j)" ></ion-radio>
</ion-item>
</ion-list>
</div>
<div class="border-hr"></div>
</div>
</ion-list>
</ion-slide>
</ion-slides>
最佳答案
您可以使用以下代码实现它。我用过 ionic 4:
//tab.page.html
<ion-header >
<!-- Scrollable Segment -->
<ion-toolbar class="less-height" color="primary">
<ion-segment scrollable mode="md" (ionChange)="segmentChanged(segment)" [(ngModel)]="segment" >
<ion-segment-button mode="md" id="seg-1" value="0">
<p>Description</p>
</ion-segment-button>
<ion-segment-button mode="md" id="seg-2" value="1">
<p>Interconnections</p>
</ion-segment-button>
<ion-segment-button mode="md" id="seg-3" value="2">
<p>Declensions</p>
</ion-segment-button>
<ion-segment-button mode="md" id="seg-4" value="3">
<p>Phraseologisms</p>
</ion-segment-button>
<ion-segment-button mode="md" id="seg-5" value="4">
<p>Etymology</p>
</ion-segment-button>
<ion-segment-button mode="md" id="seg-6" value="5">
<p>Analysis</p>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-slides (ionSlideDidChange)="slideChanged()" class="word-slides">
<ion-slide>
<p>Slide 1</p>
</ion-slide>
<ion-slide>
<p>Slide 2</p>
</ion-slide>
<ion-slide>
<p>Slide 3</p>
</ion-slide>
<ion-slide>
<p>Slide 4</p>
</ion-slide>
<ion-slide>
<p>Slide 5</p>
</ion-slide>
<ion-slide>
<p>Slide 6</p>
</ion-slide>
</ion-slides>
</ion-content>
//tab.page.ts
@ViewChild(IonSlides) slider: IonSlides;
segment = 0;
constructor() {}
async segmentChanged(event) {
await this.slider.slideTo(this.segment);
this.slider.update();
}
async slideChanged() {
this.segment = await this.slider.getActiveIndex();
this.focusSegment(this.segment+1);
}
focusSegment(segmentId) {
document.getElementById('seg-'+segmentId).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center'
});
}
关于angular - 如何在ionic 3中绑定(bind)<ion-segment>和<ion-slides>的事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46357626/