User interface Ionic React适用于移动应用程序-水平滚动屏幕外的元素

我正在使用Ionic React构建一个移动应用程序。我想创建一个超过屏幕宽度的水平滚动组件来显示类别。我似乎找不到合适的离子成分

有什么帮助吗

您可以使用并将每个案例放在一张幻灯片中

像这样：

<ion-slides pager="true" [options]="slideOpts">
    <ion-slide *ngFor="let item of items">
        <h1>some slide</h1>
    </ion-slide>
</ion-slides>

一些幻灯片

---

slideOpts可以是中的示例之一。

我通过以下方式在ionic react中完成了水平滚动：

<IonSlides pager="true" scrollbar="true" watchOverflow="false" >
 <IonSlide>
        <IonCard style={{width:"142px",height:"112px"}}>
                <IonGrid style={{background:"transparent",paddingTop:"15px",paddingLeft:"14px"}}>
                <IonRow size="12" style={{marginTop:"9px"}}>
                    <div>
                        <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>Chadwick Boseman</IonLabel>
                    </div>
                </IonRow>
                <IonRow size="12" style={{marginTop:"5px"}}>
                    <div>
                        <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>+6591876258</IonLabel>
                    </div>
                </IonRow>
                </IonGrid>
           
        </IonCard> 
      <IonSlide>
      <IonCard style={{width:"142px",height:"112px"}}>
            
            <IonGrid style={{background:"transparent",paddingTop:"15px",paddingLeft:"14px"}}>
            <IonRow size="12" style={{marginTop:"9px"}}>
                <div>
                    <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>Rajesh Buhair</IonLabel>
                </div>
            </IonRow>
            <IonRow size="12" style={{marginTop:"5px"}}>
                <div>
                    <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>+6591876258</IonLabel>
                </div>
            </IonRow>
            </IonGrid>
       
    </IonCard>
 </IonSlide>
</IonSlides>

查德威克博斯曼
+6591876258
拉杰什·布哈伊尔
+6591876258

谢谢！我就是这样做的。我在用离子反应思维！