在很多现代的APP中,我们都可以看到页面顶部的滑动菜单,比如今日头条,就是像下面这样的:
比如知乎,是像下面这样的:
这种滑动菜单栏占用面积很小,对于一个想要更多展示内容的页面来说,是一个很好的选择。它的特点是当我们滑动页面的时候,上面的菜单会跟着滑动,而且对应的菜单会被选中,高亮和居中。当我们滑动或者点选顶部的菜单栏的时候,下面的页面也会跟着进行切换。
接下来就用世界的demo来讲解在Ionic中怎样实现这一功能。
我是在我的Tab2页面里面写的demo,下面是html代码:
<ion-header>
<ion-toolbar color="primary">
<ion-segment scrollable mode="md" (ionChange)="onSegmentChange($event)" [(ngModel)]="segmentSelected">
<ion-segment-button value="0" id="segment-0">
<ion-icon name="call"></ion-icon>
<ion-label>Call</ion-label>
</ion-segment-button>
<ion-segment-button value="1" id="segment-1">
<ion-icon name="cloud-upload"></ion-icon>
<ion-label>Publish</ion-label>
</ion-segment-button>
<ion-segment-button value="2" id="segment-2">
<ion-icon name="document-text"></ion-icon>
<ion-label>Topic</ion-label>
</ion-segment-button>
<ion-segment-button value="3" id="segment-3">
<ion-icon name="code-working"></ion-icon>
<ion-label>Query</ion-label>
</ion-segment-button>
<ion-segment-button value="4" id="segment-4">
<ion-icon name="open"></ion-icon>
<ion-label>Open</ion-label>
</ion-segment-button>
<ion-segment-button value="5" id="segment-5">
<ion-icon name="search"></ion-icon>
<ion-label>Search</ion-label>
</ion-segment-button>
<ion-segment-button value="6" id="segment-6">
<ion-icon name="create"></ion-icon>
<ion-label>Write</ion-label>
</ion-segment-button>
<ion-segment-button value="7" id="segment-7">
<ion-icon name="book"></ion-icon>
<ion-label>Read</ion-label>
</ion-segment-button>
<ion-segment-button value="8" id="segment-8">
<ion-icon name="trash"></ion-icon>
<ion-label>Trash</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-slides #slides [options]="slideOptions" (ionSlideDidChange)="onSlideDidChange(slides)" (ionSlidesDidLoad)="onSlideDidChange(slides)">
<ion-slide class="slide-1">
Call
</ion-slide>
<ion-slide class="slide-2">
Publish
</ion-slide>
<ion-slide class="slide-3">
Topic
</ion-slide>
<ion-slide class="slide-1">
Query
</ion-slide>
<ion-slide class="slide-2">
Open
</ion-slide>
<ion-slide class="slide-3">
Search
</ion-slide>
<ion-slide class="slide-1">
Write
</ion-slide>
<ion-slide class="slide-2">
Read
</ion-slide>
<ion-slide class="slide-3">
Trash
</ion-slide>
</ion-slides>
</ion-content>
下面是ts代码:
import { Component, OnInit } from '@angular/core';
import { IonSlides } from '@ionic/angular';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit{
public segmentSelected: any;
public selectedSlide: any;
slideOptions = {
initialSlide: 0,
slidesPerView: 1,
speed: 400
};
constructor() {}
ngOnInit() {
this.segmentSelected = 0;
}
async onSegmentChange(event: any) {
// console.log(this.segmentSelected);
await this.selectedSlide.slideTo(this.segmentSelected);
}
async onSlideDidChange(slides: IonSlides) {
this.selectedSlide = slides;
slides.getActiveIndex().then(selectedIndex => {
this.segmentSelected = selectedIndex;
document.getElementById('segment-' + selectedIndex).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center'
});
});
}
}
下面是scss代码:
ion-segment-button {
min-width: 70px;
}
ion-slides, ion-slide {
height: 100%;
font-size: 48px !important;
}
.slide-1 {
background: #e0bbe4;
}
.slide-2 {
background: #957dad;
color: #fff;
}
.slide-3 {
background: #ffdfd3;
}
现在你只需要把这些代码拷贝到你的项目就可以实现如下效果:
https://www.bilibili.com/video/BV1uk4y1y7cb/
赶紧试一试吧,如果有什么问题,或者你有更好的解决方案,请务必立即与我联系。
这只是初级版本,还没有涉及到请求服务端数据,后面慢慢加上。
文章评论