时间戳

首页 > 解决方案 > Ionic 4：单击时如何聚焦离子段的视图

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

问题描述

有五个离子段按钮，

东西| 东西| 东西| 东西| 某物

如果我单击第 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 或其他离子版本。非常感谢您阅读

标签： angularionic-frameworkionic4ion-segment

解决方案

可以这样做，只需添加一个 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

推荐阅读