离子4:如何在单击离子段时聚焦视图 [英] Ionic 4: How to focus the view of ion-segment when its clicked

问题描述

有五个离子段按钮

某事|东西|东西|东西|东西

Something | Something | Something | Something | Something

如果我单击第四段，则视图不会跟随或聚焦于当前段.

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

以上是当前屏幕截图

点击细分后，我希望视图移动(向右或聚焦于中心)

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

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

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

推荐答案

可以这样做，只需添加一个id:

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>

然后:

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.您可以将平滑滚动"行为polyfill放入其中以使其起作用.

NOTED: This only works in Android as in iOS the WKWebView can't support the scrollIntoView with object parameters. There are possibilities you can put Smooth Scroll behavior polyfill to make it work.

https://github.com/iamdustan/smoothscroll

这篇关于离子4:如何在单击离子段时聚焦视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！