以编程方式滚动离子段 [英] Programmatically scroll ion-segment

问题描述

有什么方法可以控制片段的滚动吗?在我的情况下，滑块和分段彼此依赖，并且在滑动幻灯片时，wingwing分段不会滑动，但可以正确选择活动分段

Is there any way to control scrolling on segments? In my case the slider and segments depends on each other and when you swipe slides, overflowwing segments does not slide, but active segment will be correctly choosed

我的视图和控制器代码:

My view and controller code:

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

该片段本身可以正常工作，但是在滑动活动片段时会在屏幕后面.

The segment itself works fine, but when swiping the active segment goes behind the screen.

推荐答案

我也面临着同样的问题，并最终通过以下代码解决了该问题.

I am also facing the same issue and finally solved the issue with below code.

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

you must define the unique "id" for each "ion-segment-button"

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

希望有帮助.

这篇关于以编程方式滚动离子段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！