以编程方式滚动离子段

Question

有没有办法控制段上的滚动？在我的情况下，滑块和段相互依赖，当您滑动幻灯片时，溢出段不会滑动，但会正确选择活动段

我的视图和控制器代码：

<ion-segment scrollable mode="md" (ionChange)="segmentChanged()" [(ngModel)]="segment" color="warning">
  <ion-segment-button mode="md" value="0">
    <p>Description</p>
  </ion-segment-button>
  <ion-segment-button mode="md" value="1">
    <p>Interconnections</p>
  </ion-segment-button>
  <ion-segment-button mode="md" value="2">
    <p>Declensions</p>
  </ion-segment-button>
</ion-segment>

<ion-slides (ionSlideDidChange)="slideChanged()" pager="true">
  <ion-slide>
    First
  </ion-slide>
  <ion-slide>
    second
  </ion-slide>
  <ion-slide>
    third
  </ion-slide>
</ion-slides>

---

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

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

该段本身工作正常，但滑动时，活动段位于屏幕后面。

Answer 1

我也面临同样的问题，最后用下面的代码解决了这个问题。

您必须为每个“离子段按钮”定义唯一的“id”

<ion-segment-button SwipedTabs *ngFor="let category of tabs ; let i = index"
        value={{category}} (click)="selectTab(i)" **id="segment-{{i}}**">
        <ion-label>{{category}}</ion-label>
      </ion-segment-button>

.ts code 
async slideChanged() {
    this.activeIndex= await this.slider.getActiveIndex();
      document.getElementById("segment-" + activeIndex).scrollIntoView({
      behavior: 'smooth',
      block: 'center',
      inline: 'center'
    });
}

希望能帮助到你。