Ionic3实现按钮控制艺术家详情与歌曲列表显示/隐藏

嘿，搞定这个视图切换其实超简单！在Ionic 3里，我们可以用Angular的*ngIf指令轻松实现，这也是最适合你当前场景的方案，给你一步步拆解：

1. 模板部分（HTML） #

先把你的按钮容器和两个内容区块写好，用*ngIf根据状态控制显示：

<!-- 按钮容器 -->
<div class="button-group">
  <!-- 左侧音乐按钮 -->
  <button ion-button 
          [class.active-tab]="currentView === 'music'"
          (click)="switchToMusic()">
    音乐
  </button>
  <!-- 右侧关于按钮 -->
  <button ion-button 
          [class.active-tab]="currentView === 'artist'"
          (click)="switchToArtist()">
    关于
  </button>
</div>

<!-- 歌曲列表区块 -->
<div *ngIf="currentView === 'music'" class="content-block">
  <ion-list>
    <ion-item *ngFor="let song of songList">
      <h2>{{song.title}}</h2>
      <p>{{song.singer}}</p>
    </ion-item>
  </ion-list>
</div>

<!-- 艺术家详情区块 -->
<div *ngIf="currentView === 'artist'" class="content-block">
  <ion-card>
    <ion-card-header>{{artistInfo.name}}</ion-card-header>
    <ion-card-content>
      <p>{{artistInfo.bio}}</p>
      <p>代表作：{{artistInfo.representWorks}}</p>
    </ion-card-content>
  </ion-card>
</div>

2. 组件逻辑（TypeScript） #

在对应的页面组件里，定义状态变量和切换方法，同时初始化你的数据：

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

@Component({
  selector: 'page-music-app',
  templateUrl: 'music-app.html'
})
export class MusicAppPage {
  // 控制当前显示的视图，默认显示歌曲列表
  currentView: string = 'music';
  // 你的歌曲列表数据（这里用模拟数据，实际替换成你的真实数据）
  songList = [
    { title: '晴天', singer: '周杰伦' },
    { title: '告白气球', singer: '周杰伦' }
  ];
  // 你的艺术家详情数据
  artistInfo = {
    name: '周杰伦',
    bio: '华语乐坛流行天王，擅长创作中国风歌曲',
    representWorks: '《七里香》《青花瓷》《双截棍》'
  };

  constructor() {}

  // 切换到歌曲列表视图
  switchToMusic() {
    this.currentView = 'music';
  }

  // 切换到艺术家详情视图
  switchToArtist() {
    this.currentView = 'artist';
  }
}

3. 优化：给激活按钮加样式 #

为了让用户更清楚当前选中的是哪个按钮，可以给激活状态的按钮加个样式，在页面的SCSS文件里添加：

.button-group {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.active-tab {
  background-color: #387ef5; // Ionic默认主色调
  color: #fff;
}

.content-block {
  padding: 0 10px;
}

这个方案的优势是简单直接，不需要额外引入组件，完全利用Angular的内置指令就能实现。如果之后你的视图变得更复杂，也可以考虑用Angular的ngSwitch或者Ionic的ion-segment组件，但目前这个方案完全够用啦！

内容的提问来源于stack exchange，提问作者vignesh