1

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

有什么帮助吗？

4

3 回答 3

1

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

像这样：

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

并且 slideOpts 可以是本页中的示例之一。

于 2020-06-07T16:52:28.860 回答
1

我已经通过以下方式在离子反应中进行了水平滚动：

<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>
于 2021-02-05T20:33:39.953 回答
-1

您可以使用 IonContent 组件为其提供一个 scrollX 属性和一个固定宽度。包装项目（直接子项）的内部组件应提供 100vh 的固定宽度。

<IonContent>
  <!-- the rest of your code -->

<IonContent style={{ height: `45px` }} scrollX >
                <div style={{ width: `100vh` }}>
                    <Items></Items>
                </div>
            </IonContent>

    <!-- the rest of your code -->
于 2021-08-03T14:14:38.600 回答