How to bind events of <ion-segment> and <ion-slides> in ionic 3?

user_5561596 0
Viewed 4519

I am making an e-commerce app. On my home page i am displaying my products by category. i am using both ion-segment and ion-slides so that user will be able to scroll and select both at a time . it was fine when i had three categories , all were displaying at home but when i increased category other categories are behind screen . categories products are displaying fine but category name is inside and not visible. i want to scroll both category name and products displayed at same time on screen. that is i want to get the active segment visible on the screen, when the segment is off screen .thanks in advance :-) here is the problem

<ion-content>
<ion-segment color="dark" [(ngModel)]="tabs" style="width:640px;">
    <ion-segment-button *ngFor="let i of productcategory" (click)="selectTab(i)" value="{{i.inc}}" >{{i.category_name}}</ion-segment-button>
    <div id="slide" class="slide"></div>
</ion-segment>

<ion-slides #pageSlider (ionSlideWillChange)="changeWillSlide($event)">
    <ion-slide *ngFor="let i of productcategory">

            <ion-list>
                    <div *ngFor="let pr of products; let i=index" text-wrap class="swipe-tabs">

                            <div class="swipe-tabs-1">  
                                    <img src="http://example.com/{{pr.tbl_product_image}}" />
                                    <button ion-button (click)="removefromcart(pr,i)">-</button>
                                    <button ion-button color="light" *ngIf="check">{{quan[i]}}</button>
                                    <button ion-button color="light" *ngIf="!check">0</button>
                                    <button ion-button (click)="addToCart(pr,i)">+</button>
                                </div>
                        <div class="swipe-tabs-2">
                            <h2>{{pr.tbl_product_name}} </h2>

                            <ion-list  radio-group  >
                                <ion-item *ngFor="let p of pr.pricevariant; let j=index;">
                                    <ion-label>{{p.weight}} &nbsp; &nbsp; <span class="colr-red">₹ {{p.dprice}}</span></ion-label>
                                    <ion-radio  [value]="p.weight" (ionSelect)="getdata(pr,p,i,j)" ></ion-radio>                                
                                </ion-item>
                            </ion-list>
                        </div>
                        <div class="border-hr"></div>
                    </div>

                </ion-list> 
    </ion-slide>
</ion-slides>

ionic2 ionic3 ionic-framework angular event-handling
2 Answers

You can achive it with below code. I have used ionic 4:

// tab.page.html

<ion-header  >
 <!-- Scrollable Segment -->
 <ion-toolbar class="less-height" color="primary">
    <ion-segment scrollable mode="md" (ionChange)="segmentChanged(segment)" [(ngModel)]="segment" >
        <ion-segment-button mode="md" id="seg-1" value="0">
          <p>Description</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-2" value="1">
          <p>Interconnections</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-3" value="2">
          <p>Declensions</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-4" value="3">
          <p>Phraseologisms</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-5" value="4">
          <p>Etymology</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-6" value="5">
          <p>Analysis</p>
        </ion-segment-button>
      </ion-segment>
</ion-toolbar>
</ion-header>

<ion-content>
    <ion-slides (ionSlideDidChange)="slideChanged()" class="word-slides">
        <ion-slide>
          <p>Slide 1</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 2</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 3</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 4</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 5</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 6</p>
        </ion-slide>
      </ion-slides>
</ion-content>

// tab.page.ts

 @ViewChild(IonSlides) slider: IonSlides;
  segment = 0;
  constructor() {}
async segmentChanged(event) {
  await this.slider.slideTo(this.segment);
  this.slider.update();
}
async slideChanged() {
  this.segment = await this.slider.getActiveIndex();
  this.focusSegment(this.segment+1);
}

focusSegment(segmentId) {
  document.getElementById('seg-'+segmentId).scrollIntoView({ 
    behavior: 'smooth',
    block: 'center',
    inline: 'center'
  });
}
user_28060220
Related