Question

我是离子的新手，我试图制作一个分段按钮，按钮上有图标和文字，顶部有图标，但我遇到了麻烦。

<ion-segment-button value="Home">
  <div>
     <ion-icon name="home"></ion-icon>
     <label>Home</label>
  </div>
</ion-segment-button>

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

离子段按钮图标和文本

1 个答案: