以编程方式滚动离子段

Question

有什么方法可以控制分段滚动吗？在我的例子中，滑块和段相互依赖，当你滑动幻灯片时，overflowwing 段不会滑动，但活动段将被正确选择

我的视图和控制器代码：

<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

有趣的问题。

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

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

如果它对您的项目非常重要，您可以考虑通过将段代码和 segment-button 组件复制到您自己的单独版本中来创建自己的段？

Answer 2

看看这个，应该会有帮助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>

然后js是这样的

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

希望对大家有所帮助

Answer 3

我也遇到了同样的问题，最后用下面的代码解决了问题。

您必须为每个 "ion-segment-button"

定义唯一的 "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

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 5

对于正在寻找 Ionic + React + TypeScript 解决方案的任何人：-

const [selectedTab, setSelectedTab] = useState<string>("0");
const sliderRef = useRef<HTMLIonSlidesElement>(null);

function onTabChange(value: string) {
    if (value === "" || value == null || value === undefined) return;

    sliderRef.current?.slideTo(parseInt(value));
}

async function onSlideChange() {
    let slideIndex = await sliderRef?.current?.getActiveIndex();

    if(slideIndex == null || slideIndex === undefined)
    return;

    setSelectedTab(slideIndex.toString());
    
    document.getElementById("tab-" + slideIndex)?.scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "center",
    });
}

<IonSegment scrollable value={selectedTab} onIonChange={(e) => onTabChange(e.detail.value ?? "")}>
    <IonSegmentButton value="0" id="tab-0">
        <IonLabel>Tab 0</IonLabel>
    </IonSegmentButton>
    ....
</IonSegment>

<IonSlides ref={sliderRef} options={slideOpts} onIonSlideDidChange={() => {onSlideChange();}}>
    <IonSlide>
        <h1>Slide 0</h1>
    </IonSlide>
   ....
</IonSlides>

以编程方式滚动离子段

Programmatically scroll ion-segment

ionic-framework

ionic4