ionic组件-segment分段式导航

最新推荐文章于 2024-06-02 17:22:30 发布

求财专用糖

最新推荐文章于 2024-06-02 17:22:30 发布

阅读量756

点赞数

分类专栏： Angular 文章标签：前端

本文链接：https://blog.csdn.net/qq_41768447/article/details/104955752

版权

Angular 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用Angular实现分段式导航，通过ion-segment组件进行双向数据绑定，配合ngSwitch指令实现不同内容的动态切换，展示了具体的Ts代码与Html代码实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

Ts代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.page.html',
  styleUrls: ['./news.page.scss'],
})

export class NewsPage implements OnInit {

  //定义一个tab
  public tab="tab3";

  constructor() { }

 ngOnInit() {}

  segmentChanged($event){
    console.log('$event');
  }

}

Html代码：

  <!--【ion-segment】可以进行双向数据绑定，加载时，首先判断下面的内容谁等于tab的值，默认显示谁的值-->
  <ion-segment [(ngModel)]="tab">
    <ion-segment-button value="tab1">
      <ion-label>分段式导航1</ion-label>
    </ion-segment-button>
    <ion-segment-button value="tab2">
      <ion-label>分段式导航2</ion-label>
    </ion-segment-button>
    <ion-segment-button value="tab3">
      <ion-label>分段式导航</ion-label>
    </ion-segment-button>
  </ion-segment>

  <!--数据绑定查看tab的内容-->
  <p> {{tab}} </p>

<!--采用【ngSwitch】的方法进行分段式导航的内容切换-->
 <div [ngSwitch]="tab">
    <section *ngSwitchCase="'tab1'">
      分段式导航内容1----注意写法*ngSwitchCase="'tab1'"
    </section>
    <section *ngSwitchCase="'tab2'">
      分段式导航内容2
    </section>
    <section *ngSwitchCase="'tab3'">
      分段式导航内容3
    </section>
  </div>