Ionic 4：单击时如何聚焦离子段的视图

Question

有五个离子段按钮，

有些事 |东西 |东西 |东西 |东西

如果我单击第 4 个片段，视图不会跟随或聚焦到当前片段。

以上为当前截图

我希望在单击片段时视图移动（向右或将其聚焦到中心）

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();
}

找到了其他解决方案，但它只适用于 Ionic 3 或其他离子版本.. 非常感谢您的阅读

Answer 1

也可以这样，加个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>

然后：

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

注意： 这仅在 Android 中有效，因为在 iOS 中 WKWebView 不支持带有对象参数的 scrollIntoView。您可以放置 Smooth Scroll 行为 polyfill 使其工作。

https://github.com/iamdustan/smoothscroll

Answer 2

完整的解决方案如下：

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

Ionic 4：单击时如何聚焦离子段的视图

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

ionic-framework

angular

ionic4

ion-segment