ionic3用Segment实现左右滑动菜单

1.这里使用Segment实现左右滑动菜单主要是解决一下两个问题：

之前在 Ionic3学习笔记(三)这篇博客里我使用的Swiper实现的左右滑动菜单的页面布局默认居中的问题，在

.slide-zoom {  
      height: 100%;  
    }

里面你可以这是页面的整体布局是left，center，right，但是在页面里面子级布局就继承了这里的父级布局，导致布局困难，使用!importment没有解决，其次用了swiper实现左右滑动菜单之后，我在页面头部加的menuToggle（左侧栏菜单）在页面向右滑动时菜单不打开。

2.ionic3的提供的Segment组件一般使用起来是没有什么问题的，但是这里使用Segment实现左右滑动菜单主要是给Segment组件加上滑动事件问题。

这里我们使用HammerJS中处理事件的方法，果果event的direction来判断滑动方向，其对用关系如下：

根据这个我们来实现左右滑动，详细代码如下：

<ion-header>
  <!-- mode="md":指定为Android手机模式的 -->
    <ion-segment [(ngModel)]="testSegment" mode="md">
      <ion-segment-button *ngFor="let testItem of testArray" value="{{testItem}}">
        {{testItem}}
      </ion-segment-button>
    </ion-segment>
</ion-header>

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

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

这样就可以实现以下效果，基本的左右滑动菜单已经实现

2.如果你想修改左右滑动菜单的样式请往下看

（1）这段代码写在css里面，用来控制点击或滑动到当前菜单的颜色和默认菜单的颜色

.segment-md .segment-button {
        color:red ;
    }
    
    .segment-md .segment-button.segment-activated {
        color:blue ;
        font-weight: bold;
    }

（2）在variable.scss里面写以下内容，用来取消底边边框，（更多设置可以参考https://ionicframework.com/docs/api/components/segment/Segment/）

// 设置段按钮下面的底部边框
$segment-button-md-border-bottom-width:0px;

修改完成之后的效果

这里是我一个初步理解的总结，更多的触摸事件可以使用HammerJS插件，参照HammerJS 官网。

这里是我推荐的一个博客https://www.cnblogs.com/vajoy/p/4011723.html 希望对大家有帮助

ionic3用Segment实现左右滑动菜单

猜你喜欢