Infinte scrolling with ion-segments ionic2


#1

i have an issue when using infinite scrolling with segments , when scroll in specific segment the reflection of scrolling occur in current segment an other segments .

this is my code

    <ion-list *ngSwitchCase="'allOrders'">
        
        <div class="spinner">
            <ion-spinner color="primary" text-center name="ios"  *ngIf="orderData==0"></ion-spinner>  
        </div>
        <!--<ion-item>--> 
       <span *ngIf="orderData!=0">
           <ion-grid  *ngFor="let order of orderData">
                <!--<div class="orderBlock">-->
                <ion-row responsive-ls>
                    <ion-col col-2>
                        <ion-avatar *ngIf="order.status==1" (click)="orderDetails(order.id)" class="explanation">
                            <ion-icon  name="information-circle"></ion-icon>
                        </ion-avatar>
                        <ion-avatar *ngIf="order.status==2" (click)="orderDetails(order.id)" class="reject">
                            <ion-icon  name="close-circle"></ion-icon>
                        </ion-avatar>
                        <ion-avatar *ngIf="order.status==3" (click)="orderDetails(order.id)" class="ok">
                            <ion-icon  name="checkmark-circle"></ion-icon>
                        </ion-avatar>
                    </ion-col>
                    <ion-col col-3 class="time" (click)="orderDetails(order.id)">
                        <span>#{{order.id}}</span>
                        <span>{{order.date}}</span>
                    </ion-col>
                    <ion-col col-3 class="time" (click)="orderDetails(order.id)">
                        <span>{{order.time}}</span>
                        <span>{{order.since}}</span>
                    </ion-col>
                    <ion-col col-4 col-sm >
                        <button class="clientName" (click)="Contact('client',order.user_mobile)" ion-button color="secondary">
                            <span>{{order.user_name}}</span>
                            <span>{{order.user_mobile}}</span>
                        </button>
                    </ion-col>
                </ion-row>
                <ion-row responsive-ls>
                    <ion-col col-2 no-padding> </ion-col>
                    <ion-col no-padding>
                        <hr class="seperate" no-margin>
                    </ion-col>
                </ion-row>

                <ion-row responsive-ls>
                    <ion-col col-2></ion-col>
                    <ion-col class="info" col-3 (click)="orderDetails(order.id)">
                        <span>معلومات مقدم</span>
                        <span>الخدمه</span>
                    </ion-col>

                    <ion-col col-3 class="mycol" (click)="orderDetails(order.id)">
                        <button ion-button outline class="serviceProviderInfo">
                        <span >{{order.res_name}}</span>
                            <span >{{order.branch_area}} - {{order.branch_city}}</span>
                        </button>
                    </ion-col>

                    <ion-col col-4 col-auto>
                        <button class="clientName1" (click)="Contact('manager',order.branch_manager)" ion-button color="secondary">
                            <span>{{order.branch_manager}}</span>
                            <span>{{order.branch_mobile}}</span>
                        </button>
                    </ion-col>
                </ion-row>
            </ion-grid>
       </span>
          
          <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content></ion-infinite-scroll-content>
          </ion-infinite-scroll>
     <!--end allOrders-->
    </ion-list>
            
    <!--end user community setion-->


    <!--confirmed orders section-->
    <ion-list *ngSwitchCase="'accepted'">
        <div class="spinner">
            <ion-spinner color="primary" text-center name="ios"  *ngIf="confirmedOrders==0"></ion-spinner>  
        </div>
         <span *ngIf="confirmedOrders!=0">
           <ion-grid  *ngFor="let order of confirmedOrders">
                <!--<div class="orderBlock">-->
                <ion-row responsive-ls>
                    <ion-col col-2>
                        <ion-avatar *ngIf="order.status==1" (click)="orderDetails(order.id)" class="explanation">
                            <ion-icon  name="information-circle"></ion-icon>
                        </ion-avatar>
                        <ion-avatar *ngIf="order.status==2" (click)="orderDetails(order.id)" class="reject">
                            <ion-icon  name="close-circle"></ion-icon>
                        </ion-avatar>
                        <ion-avatar *ngIf="order.status==3" (click)="orderDetails(order.id)" class="ok">
                            <ion-icon  name="checkmark-circle"></ion-icon>
                        </ion-avatar>
                    </ion-col>
                    <ion-col col-3 class="time" (click)="orderDetails(order.id)">
                        <span>#{{order.id}}</span>
                        <span>{{order.date}}</span>
                    </ion-col>
                    <ion-col col-3 class="time" (click)="orderDetails(order.id)">
                        <span>{{order.time}}</span>
                        <span>{{order.since}}</span>
                    </ion-col>
                    <ion-col col-4 col-sm >
                        <button class="clientName" (click)="Contact('client',order.user_mobile)" ion-button color="secondary">
                            <span>{{order.user_name}}</span>
                            <span>{{order.user_mobile}}</span>
                        </button>
                    </ion-col>
                </ion-row>
                <ion-row responsive-ls>
                    <ion-col col-2 no-padding> </ion-col>
                    <ion-col no-padding>
                        <hr class="seperate" no-margin>
                    </ion-col>
                </ion-row>

                <ion-row responsive-ls>
                    <ion-col col-2></ion-col>
                    <ion-col class="info" col-3 (click)="orderDetails(order.id)">
                        <span>معلومات مقدم</span>
                        <span>الخدمه</span>
                    </ion-col>

                    <ion-col col-3 class="mycol" (click)="orderDetails(order.id)">
                        <button ion-button outline class="serviceProviderInfo">
                        <span >{{order.res_name}}</span>
                            <span >{{order.branch_area}} - {{order.branch_city}}</span>
                        </button>
                    </ion-col>

                    <ion-col col-4 col-auto>
                        <button class="clientName1" (click)="Contact('manager',order.branch_manager)" ion-button color="secondary">
                            <span>{{order.branch_manager}}</span>
                            <span>{{order.branch_mobile}}</span>
                        </button>
                    </ion-col>
                </ion-row>
            </ion-grid>

            <ion-infinite-scroll (ionInfinite)="doInfiniteAccepted($event,'accept')">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
            </ion-infinite-scroll>
            
       </span>
    </ion-list>