Question

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

我的视图和控制器代码：

<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

document.getElementById("your-id").scrollIntoView({
  behavior: 'smooth',
  block: 'center',
  inline: 'center'
});

<ion-segment scrollable [(ngModel)]="currentTab">
  <ion-segment-button value="subject" id="subject">
    <ion-label>ASSUNTO</ion-label>
  </ion-segment-button>
  <ion-segment-button value="book" id="books">
    <ion-label>LIVROS</ion-label>
  </ion-segment-button>
</ion-segment>

太棒了！

Answer 2

有趣的问题。

开箱即用不支持。我不确定是否可以这样做，因为据我了解，除非公开API，否则无法进入ion-segment Web组件的内部。

此封装是如何将组件放入页面中而不与其他内容冲突的方式。

如果这对您的项目而言非常重要，那么您可以考虑通过将细分和细分按钮组件的代码复制到自己的单独版本中来创建自己的细分？

Answer 3

我也面临着同样的问题，并最终通过下面的代码解决了这个问题。

您必须为每个“离子段按钮”定义唯一的“ 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'
    });
}

希望有帮助。

Answer 4

检查一下，应该可以Ionic 4 Segments and Slides

.html可以像这样：

<ion-app>
  <ion-header>
   <ion-toolbar color="primary">
    <ion-title>Ionic 4 Segment</ion-title>
   </ion-toolbar>
  <ion-toolbar color="primary">
  <ion-segment scrollable>
    <ion-segment-button value="0" checked>
      <ion-icon name="call"></ion-icon>
      <ion-label>Call</ion-label>
    </ion-segment-button>
    <ion-segment-button value="1">
      <ion-icon name="cloud-upload"></ion-icon>
      <ion-label>Publish</ion-label>
    </ion-segment-button>
    <ion-segment-button value="2">
      <ion-icon name="paper"></ion-icon>
      <ion-label>Topic</ion-label>
    </ion-segment-button>
    <ion-segment-button value="3">
      <ion-icon name="code-working"></ion-icon>
      <ion-label>Query</ion-label>
    </ion-segment-button>
    <ion-segment-button value="4">
      <ion-icon name="open"></ion-icon>
      <ion-label>Open</ion-label>
    </ion-segment-button>
    <ion-segment-button value="5">
      <ion-icon name="search"></ion-icon>
      <ion-label>Search</ion-label>
    </ion-segment-button>
    <ion-segment-button value="6">
      <ion-icon name="create"></ion-icon>
      <ion-label>Write</ion-label>
    </ion-segment-button>
    <ion-segment-button value="7">
      <ion-icon name="book"></ion-icon>
      <ion-label>Read</ion-label>
    </ion-segment-button>
    <ion-segment-button value="8">
      <ion-icon name="trash"></ion-icon>
      <ion-label>Trash</ion-label>
    </ion-segment-button>
   </ion-segment>
  </ion-toolbar>
 </ion-header>

<ion-content>
 <ion-slides>
  <ion-slide class="slide-1">
    Call
  </ion-slide>
  <ion-slide class="slide-2">
    Publish
  </ion-slide>
  <ion-slide class="slide-3">
    Topic
  </ion-slide>
  <ion-slide class="slide-1">
    Query
  </ion-slide>
  <ion-slide class="slide-2">
    Open
  </ion-slide>
  <ion-slide class="slide-3">
    Search
  </ion-slide>
  <ion-slide class="slide-1">
    Write
  </ion-slide>
  <ion-slide class="slide-2">
    Read
  </ion-slide>
  <ion-slide class="slide-3">
    Trash
  </ion-slide>
   </ion-slides>
  </ion-content>
 </ion-app>

然后像这样的

var segment = document.querySelector('ion-segment');
var slides = document.querySelector('ion-slides');

segment.addEventListener('ionChange', (ev) => onSegmentChange(ev));
slides.addEventListener('ionSlideDidChange', (ev) => 
 onSlideDidChange(ev));

// On Segment change slide to the matching slide
function onSegmentChange(ev) {
 slideTo(ev.detail.value);
}

function slideTo(index) {
 slides.slideTo(index);
}

// On Slide change update segment to the matching value
async function onSlideDidChange(ev) {
 var index = await slides.getActiveIndex();
 clickSegment(index);
}

function clickSegment(index) {
  segment.value = index;
}

我希望这对任何人都有帮助

以编程方式滚动离子段

4 个答案: