离子段按钮图标和文本

1 回答

• -1

  在这里找到了一个很棒的教程：https://www.youtube.com/watch?v=mlwVsr0_iO8

  home.html的

  <ion-header >
      <ion-navbar>
          <ion-title>
              SwipedTabs
          </ion-title>
      </ion-navbar>
  </ion-header>
  
  <ion-content >
  
      <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>
  
      <!-- here is our dynamic line  "indicator"-->
      <div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]="{'width.%': (100/this.tabs.length)}"></div>
  
      <ion-slides #SwipedTabsSlider  (ionSlideDrag)="animateIndicator($event)"
                              (ionSlideWillChange)="updateIndicatorPosition()"
                              (ionSlideDidChange)="updateIndicatorPosition()"
                              (pan)="updateIndicatorPosition()"
                              [pager]="false"
                  >
          <ion-slide>
        <h1>Page 1 </h1>
          </ion-slide>
          <ion-slide>
              <h1>Page 2 </h1>
  
  </ion-slide>
  </ion-slides>
  

  home.ts

  import { Component ,ViewChild} from '@angular/core';
  import { NavController ,Slides} from 'ionic-angular';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
   @ViewChild('SwipedTabsSlider') SwipedTabsSlider: Slides ;
  
    SwipedTabsIndicator :any= null;
    tabs:any=[];
  
  
    constructor(public navCtrl: NavController) {
      this.tabs=["page1","page2"];
    }
    ionViewDidEnter() {
      this.SwipedTabsIndicator = document.getElementById("indicator");
    }
  
    selectTab(index) {
      this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(100*index)+'%,0,0)';
      this.SwipedTabsSlider.slideTo(index, 500);
    }
  
    updateIndicatorPosition() {
        // this condition is to avoid passing to incorrect index
      if( this.SwipedTabsSlider.length()> this.SwipedTabsSlider.getActiveIndex())
      {
          this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(this.SwipedTabsSlider.getActiveIndex() * 100)+'%,0,0)';
      }
  
      }
  
    animateIndicator($event) {
      if(this.SwipedTabsIndicator)
          this.SwipedTabsIndicator.style.webkitTransform = 'translate3d(' + (($event.progress* (this.SwipedTabsSlider.length()-1))*100) + '%,0,0)';
    }
  }
  

  回复于 2024-05-20T16:12:50+08:00