Scrolling the ion-cards

@premktr wrote:

I am using ionic4-angular and I want to scroll my ion-card but the entire page is scrolling I know that I have to use infinite scroll but I don’t know the way of using and I am failed to use the same.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="primary">
            <ion-button fill="none">
                <ion-icon id="chat" src="assets/custom/chat.svg">
                </ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-buttons slot="start">
            <ion-button fill="none">
                <ion-icon id="logoW" src="assets/custom/logo-W.svg" slot="icon-only"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title></ion-title>

    </ion-toolbar>
</ion-header>
<ion-content>

    <div id="slides1">
        <ion-slides #mySlider (ionSlidesDidLoad)="slidesDidLoad(mySlider)" [options]="sliderConfig" loop="true">
            <ion-slide>
                <img style="max-height:auto " src="../assets/img/1.png" />
            </ion-slide>
            <ion-slide>
                <img style="max-height:auto" src="../assets/img/2.png" />
            </ion-slide>
            <ion-slide>
                <img style="max-height:auto" src="../assets/img/3.png" />
            </ion-slide>
            <ion-slide>
                <img style="max-height:auto" src="../assets/img/4.png" />
            </ion-slide>
        </ion-slides>
    </div>

    <!--- <ion-searchbar *ngIf="isShown" showCancelButton="true" (ionCancel)="isShown=false" searchIcon> </ion-searchbar>
       <ion-buttons >
         <button ion-button icon-only  *ngIf="!isShown" (click)="isShown=true">
           <ion-icon id="search"name="search">

           </ion-icon>

         </button>
       </ion-buttons>   -->
    <ion-grid>
        <ion-row>

            <ion-col col-3>
                <div class="box">
                    <div class="container-2">
                        <span class="icon"><i class="fa fa-search"></i></span>
                        <input type="search" id="search" />
                    </div>
                </div>
            </ion-col>
            <ion-segment [(ngModel)]="status">
                <ion-col col-3>
                    <ion-segment-button color="primary" value="on">
                        <ion-label>Ongoing</ion-label>

                    </ion-segment-button>
                </ion-col>
                <ion-col col-3>
                    <ion-segment-button value="up">
                        <ion-label>Upcoming</ion-label>

                    </ion-segment-button>
                </ion-col>
            </ion-segment>

            <ion-icon id="filter" name="switch"></ion-icon>

        </ion-row>
    </ion-grid>

    <div [ngSwitch]="status">

        <ion-grid *ngSwitchCase="'on'">
            <ion-row>
                <ion-col>
                    <ion-card>
                        <ion-card-title text-center>

                            END OF SEASON SALE
                        </ion-card-title>
                    </ion-card>

                    <ion-card>
                        <ion-card-title text-center>

                            END OF SEASON SALE
                        </ion-card-title>
                    </ion-card>

                    <ion-card>
                        <ion-card-title text-center>

                            END OF SEASON SALE
                        </ion-card-title>
                    </ion-card>

                    <ion-card>
                        <ion-card-title text-center>

                            END OF SEASON SALE
                        </ion-card-title>
                    </ion-card>

                </ion-col>

            </ion-row>
        </ion-grid>

        <ion-grid *ngSwitchCase="'up'">
            <ion-row>
                <ion-col>
                    <ion-infinite-scroll threshold="100px">
                        <ion-card>
                            <ion-card-title>

                                Kofluence
                            </ion-card-title>
                        </ion-card>

                        <ion-card>
                            <ion-card-title text-center>

                                END OF SEASON SALE
                            </ion-card-title>
                        </ion-card>
                    </ion-infinite-scroll>
                </ion-col>
            </ion-row>
        </ion-grid>

        <ion-fab vertical="bottom" horizontal="end">
            <ion-fab-button color="dark">
                <ion-icon name="add"></ion-icon>
            </ion-fab-button>

            <ion-fab-list side="start">

                <ion-fab-button color="dark">
                    <ion-icon name="logo-twitter"></ion-icon>
                </ion-fab-button>
                <ion-fab-button color="dark">
                    <ion-icon name="logo-facebook"></ion-icon>
                </ion-fab-button>
                <ion-fab-button color="dark">
                    <ion-icon name="logo-instagram">Youtube</ion-icon>
                </ion-fab-button>
            </ion-fab-list>

        </ion-fab>

    </div>

Thanks in advance.

Posts: 1

Participants: 1

Read full topic