Question

有五个离子段按钮

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

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

以上是当前屏幕截图

点击细分后，我希望视图移动（向右或将其聚焦在中心）

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

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

离子4：如何在单击离子段时聚焦离子束

2 个答案: