我正在使用带有离子芯片的离子载玻片组件来制作类别(例如,YouTube 在主屏幕上用于快速搜索的所有、喜剧等)。
当我以模态打开时,该组件工作正常,但没有橡皮筋效果,所以我希望用户只滚动到模态中的第一个和最后一个芯片。但在模态芯片中滚动不停。
#ionSlidesComponentWithChips
<ion-item color="dark" class="border-top-1">
<ion-slides [options]="slideOpts">
<ion-slide *ngFor="let category of categories">
<ion-chip color="light" has-bouncing="true">
<ion-label>{{category}}</ion-label>
</ion-chip>
</ion-slide>
</ion-slides>
</ion-item>
我在模态中添加了组件。
<app-header></app-header>
<app-category-slides></app-category-slides>
<ion-content>
<ion-backdrop class="ion-margin-top"></ion-backdrop>
<img src="assets/imgs/{{img}}.jpg">
</ion-content>
<ion-footer translucent="false" class="ion-no-border" color="dark">
<ion-item lines="none" text-center color="dark">
<ion-grid>
<ion-row class="ion-align-items-center ion-text-center">
<ion-col>
<ion-button color="light" fill="clear">
<span class="material-icons">
thumb_up
</span>
</ion-button>
<span class="ion-padding">2.2k</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear">
<span class="material-icons">
thumb_down
</span>
</ion-button>
<span class="ion-padding">20</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear">
<span class="fa fa-share"></span>
</ion-button>
<span class="ion-padding">Share</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear">
<span class="material-icons">
favorite
</span>
</ion-button>
<span class="ion-padding">Save</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear" (click)="close()">
<span class="material-icons">
close
</span>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-footer>