前言

想要實現(xiàn)有tabs標(biāo)簽，但是不用點擊，在content內(nèi)容部分左右滑動就可以跳轉(zhuǎn)到相關(guān)的tab頁面，上周我根據(jù)官方的文檔使用<ion-slides>來做其實也是可以的，就是一個問題沒有解決一個居中問題，使用slides包裹的其他頁面，那么其他頁面里面的內(nèi)容會被強制居中，于是放棄了使用slides實現(xiàn)滑動標(biāo)簽，（有原圖的，結(jié)果發(fā)現(xiàn)那一次的代碼刪掉了，有空我會重新貼上上次使用slides實現(xiàn)的效果），有興趣的可以探討解決一下如何使用slides完美實現(xiàn)。
于是這次在同組成員的努力下，完成了效果的實現(xiàn)。非常感謝原博主提供的博客供大家學(xué)習(xí)，本日記是參考原博主完成此功能的
http://blog.csdn.net/u010730897/article/details/53467051

思路

對應(yīng)的value

使用這個對應(yīng)關(guān)系就可以來做判斷他是具體左劃還是右劃了，這次這次涉及的頁面有homepage和menupagePage

home.html

<ion-content (swipe)="swipeEvnet($event)">
  <div [ngSwitch]="testSegment">
    <div *ngSwitchCase="'菜單一'">
      <page-menupage></page-menupage>
    </div>
    <div *ngSwitchCase="'菜單二'">
      菜單二
    </div>
    <div *ngSwitchCase="'菜單三'">
      菜單三
    </div>
    <div *ngSwitchCase="'菜單四'">
      菜單四
    </div>
  </div>
</ion-content>

在這里還是選擇了在content中添加滑動事件，一旦有滑動將觸發(fā)swipeEvnet函數(shù),ngSwitch和ngSwitchCase之后再解釋。這里只在第一個div中導(dǎo)入了頁面元素，其他3個都是測試，當(dāng)然也可以導(dǎo)入

home.ts

export class HomePage {

  testArray: string[] = ['菜單一', '菜單二', '菜單三', '菜單四'];
  testSegment: string = this.testArray[0];

  constructor(public navCtrl: NavController) {
  }

  swipeEvnet(event) {
    //向左滑
    if (event.direction == 2) {
      if (this.testArray.indexOf(this.testSegment) < 3) {
        this.testSegment = this.testArray[this.testArray.indexOf(this.testSegment) + 1];
      }
    }
    //向右滑
    if (event.direction == 4) {
      if (this.testArray.indexOf(this.testSegment) > 0) {
        this.testSegment = this.testArray[this.testArray.indexOf(this.testSegment) - 1];
      }
    }
  }
}

設(shè)置了數(shù)組保存菜單（默認(rèn)有4個菜單頁），再設(shè)置testSegment用來計數(shù)，當(dāng)滑動觸發(fā)后，將會跳轉(zhuǎn)到testSegment指向的頁面，這時候需要html那獲取滑動到的是哪一個頁面，使用*ngSwitchCase將當(dāng)前的頁面賦值給testSegment，在滑動時滑動判斷的值返還給函數(shù)做判斷操作

注意

效果

取消掉<ion-header>和<ion-content>后效果：

效果

后言

這個項目暫時還沒在我手機上運行試試情況，因為我遇到一個無法解決的問題，手機連接電腦突然就不能被電腦識別， 所以所有的效果都是在瀏覽器上看的，如果真機運行有問題的話可以提出來，我會做出相關(guān)的更正