全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Ionic
  4. 正文

Ionic中使用Segment组件实现顶部滑动菜单栏

2020年9月2日 1338点热度 0人点赞 0条评论

在很多现代的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/

赶紧试一试吧,如果有什么问题,或者你有更好的解决方案,请务必立即与我联系。

这只是初级版本,还没有涉及到请求服务端数据,后面慢慢加上。

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小技巧
最后更新:2020年9月4日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号