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 希望对大家有帮助