如何在ionic3的class =“ SwipedTabs-tabs”内添加动态页面？

Question

我已经创建了一个动态滑动选项卡，并且我拥有4个动态页面，并且我必须将此页面放在其中而不是选项卡，并且页面是>

我在上面的标签页中添加了此页面，该怎么做？

public mainHomePage    : any = MainHomePage;
public connectionPage  : any = ConnectionPage ;
public chatPage        : any = ChatPage;
public sharePage       : any = SharePage;

<ion-segment  class="SwipedTabs-tabs"  >
  <ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="IngoreMe" (click)="selectTab(i)"
  [ngClass]='{ "SwipedTabs-activeTab" : ( this.SwipedTabsSlider  &&this.SwipedTabsSlider.getActiveIndex() === i || (  tabs.length -1 === i&& this.SwipedTabsSlider.isEnd()))) }' >
    {{tab}}
  </ion-segment-button>
</ion-segment>

<ion-slides pager>

  <ion-slide>
    <h2>Page 1</h2>
  </ion-slide>

  <ion-slide>
    <h2>Page 2</h2>
  </ion-slide>

  <ion-slide>
    <h2>Page 3</h2>
  </ion-slide>

</ion-slides>

Answer 1

可能是您所期望的。.请检查此。 使用离子载玻片内的相应选择器。如果您想将html页面加载到标签页，则可以正常使用。

<ion-segment  class="SwipedTabs-tabs"  (ionChange)="onSegmentChanged($event)" >
  <ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="{{i}}">
    {{tab}}
  </ion-segment-button>
</ion-segment>

<ion-slides #mySlider>

  <ion-slide>
    <page-home></page-home>
  </ion-slide>

  <ion-slide>
    <page-connect></page-connect>
  </ion-slide>

  <ion-slide>
    <page-share></page-share>
  </ion-slide>
      <ion-slide>
    <page-chat></page-chat>
  </ion-slide>
</ion-slides>

ts

  onSegmentChanged(segmentButton) {
    console.log("Segment changed to", segmentButton.value);
    const selectedIndex = this.slides.findIndex((slide) => {
      return slide.id === segmentButton.value;
    });
    this.slider.slideTo(segmentButton.value);
  }