用于移动应用程序的 Ionic React - 水平滚动元素超出屏幕

Question

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

有什么帮助吗？

Answer 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 可以是this page中的示例之一。

Answer 2

我通过以下方式在离子反应中完成了水平滚动：

<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>

Answer 3

您可以使用 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 -->

用于移动应用程序的 Ionic React - 水平滚动元素超出屏幕

Ionic React for mobile apps - Horizontal scrolling with elements that get out of screen

user-interface

horizontal-scrolling

ionic-framework

ionic-react