我正在制作一款电子商务应用程序。在我的主页上,我按类别显示我的产品。我同时使用ion-segment和ion-slides,以便用户能够滚动并同时选择。当我有三个类别时,一切都很好,所有类别都在主页上显示,但是当我增加类别时,其他类别就会被隐藏在屏幕后面。类别产品显示正常,但类别名称在内部且不可见。我想要同时滚动类别名称和产品在屏幕上显示。也就是说,当该段落不在屏幕上时,我想要获得活动段落在屏幕上可见的效果。谢谢! :-)
![这是问题](https://istack.dev59.com/S6v9k.webp)
<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>