Ionic 4: How to focus the view of ion-segment when its clicked

问题

There are five ion-segment-button,

---

Something | Something | Something | Something | Something

---

If I click the 4th segment the view didnt follow or focus to the current segment.

Above is the current screenshot

I want the view move (to the right or focus it to the center) when the segment is clicked

HTML:

<ion-row>
    <!-- ion-segment -->
    <ion-toolbar>
      <ion-segment (ionChange)="segmentChanged()" [(ngModel)]="segment" color="tertiary" scrollable>
        <ion-segment-button value="0">
          Something
        </ion-segment-button>
        <ion-segment-button value="1">
          Something
        </ion-segment-button>
        <ion-segment-button value="2">
          Something
        </ion-segment-button>
        <ion-segment-button value="3">
          Something
        </ion-segment-button>
        <ion-segment-button value="4">
          Something
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>

    <ion-col>
      <ion-slides #slides (ionSlideDidChange)="slideChanged()" scrollbar="true" [options]="slideOpts">
        <!-- Something -->
        <ion-slide style="overflow-y: auto">
          <p>Something</p>
        </ion-slide>
        <!-- Something -->
        <ion-slide>
         <p>Something</p>
        </ion-slide>
        <!-- Something -->
        <ion-slide>
          <p>Something</p>
        </ion-slide>
        <!-- Something -->
        <ion-slide>
          <p>Something</p>
        </ion-slide>
        <!-- Something -->
        <ion-slide>
          <p>Something</p>
        </ion-slide>
      </ion-slides>   
    </ion-col>
</ion-row>

TS:

slideOpts = {
    zoom: false
};

@ViewChild('slides') slider: IonSlides;

segment = 0;

async segmentChanged() {
    await this.slider.slideTo(this.segment);
}

async slideChanged() {
    this.segment = await this.slider.getActiveIndex();
    this.slider.update();
}

The found other solution but its only suitable on Ionic 3 or another ionic version.. Thank you so much for reading

回答1:

It could be done like this, just add an id:

<ion-segment-button id="something-1" value="0">
    Something
<ion-segment-button>
<ion-segment-button id="something-2" value="1">
    Something
<ion-segment-button>
<ion-segment-button id="something-3" value="2">
    Something
<ion-segment-button>
<ion-segment-button id="something-4" value="3">
    Something
<ion-segment-button>
<ion-segment-button id="something-5" value="4">
    Something
<ion-segment-button>

and then:

async segmentChanged(event) {
    this.focusSegment(event['srcElement']['children'][this.segment]['id']);
    await this.slider.slideTo(this.segment);
}

focusSegment(segmentId) {
    document.getElementById(segmentId).scrollIntoView({ 
      behavior: 'smooth',
      block: 'center',
      inline: 'center'
    });
}

回答2:

Here is the complete solution:

// 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'
  });
}

来源：https://stackoverflow.com/questions/57122698/ionic-4-how-to-focus-the-view-of-ion-segment-when-its-clicked