如何在Ionic 3的所有页面中使用相同的页脚？

嘿，我来帮你搞定这个音乐应用的功能实现思路和核心代码片段吧！

结合你描述的需求，咱们分两个页面拆解实现逻辑：

1. albumname.html 页面核心实现 #

这个页面要完成歌曲列表展示、点击歌曲更新页脚播放控件、点击页脚跳转至modal页面这几个核心功能。

页面结构示例 #

歌曲列表部分

给每首歌的元素添加自定义数据属性，用来存储歌曲关键信息，方便后续读取：

<div class="song-list">
  <div class="song-item" 
       data-song-title="夜曲" 
       data-artist="周杰伦" 
       data-duration="3:45" 
       data-image="night-song.jpg">
    夜曲 - 周杰伦
  </div>
  <div class="song-item" 
       data-song-title="晴天" 
       data-artist="周杰伦" 
       data-duration="4:29" 
       data-image="sunny-day.jpg">
    晴天 - 周杰伦
  </div>
  <!-- 更多歌曲项 -->
</div>

页脚播放控件部分

用来展示当前选中歌曲的播放信息：

<footer class="player-footer" id="playerFooter">
  <div class="artist-name" id="artistName"></div>
  <div class="song-title" id="songTitle"></div>
  <div class="player-controls">
    <button id="prevBtn">←</button>
    <button id="playPauseBtn">▶</button>
    <button id="nextBtn">→</button>
  </div>
  <div class="progress-container">
    <div class="progress-bar" id="progressBar"></div>
    <span class="song-duration" id="songDuration"></span>
  </div>
</footer>

JavaScript交互逻辑 #

// 获取DOM元素
const songItems = document.querySelectorAll('.song-item');
const playerFooter = document.getElementById('playerFooter');
const artistNameEl = document.getElementById('artistName');
const songTitleEl = document.getElementById('songTitle');
const songDurationEl = document.getElementById('songDuration');

// 存储当前选中的歌曲信息
let currentSong = {};

// 监听歌曲点击事件，更新页脚内容
songItems.forEach(item => {
  item.addEventListener('click', () => {
    // 读取歌曲数据
    currentSong = {
      title: item.dataset.songTitle,
      artist: item.dataset.artist,
      duration: item.dataset.duration,
      image: item.dataset.image
    };
    // 更新页脚显示
    artistNameEl.textContent = currentSong.artist;
    songTitleEl.textContent = currentSong.title;
    songDurationEl.textContent = currentSong.duration;
    // 这里可以添加播放状态初始化逻辑，比如重置进度条等
  });
});

// 监听页脚点击事件，跳转至modal页面
playerFooter.addEventListener('click', () => {
  // 通过URL参数传递歌曲信息给modal页面
  const queryParams = new URLSearchParams(currentSong).toString();
  window.open(`modal.html?${queryParams}`, '_blank', 'width=600,height=800');
});

2. modal.html 页面核心实现 #

这个页面需要接收从albumname页面传递的歌曲信息，并渲染展示。

页面结构示例 #

<div class="modal-container">
  <img src="" alt="歌曲封面" id="songImage">
  <h2 id="modalSongTitle"></h2>
  <p id="modalSongDuration"></p>
</div>

JavaScript数据接收与渲染逻辑 #

// 获取URL中的参数
const urlParams = new URLSearchParams(window.location.search);
const songData = {
  title: urlParams.get('title'),
  artist: urlParams.get('artist'),
  duration: urlParams.get('duration'),
  image: urlParams.get('image')
};

// 渲染页面内容
document.getElementById('modalSongTitle').textContent = songData.title;
document.getElementById('modalSongDuration').textContent = `时长：${songData.duration}`;
document.getElementById('songImage').src = songData.image;

额外优化建议 #

• 给modal页面添加关闭按钮，通过window.close()实现关闭功能
• 页脚的播放/暂停、上下曲功能，可以结合HTML5的<audio>标签实现真实的播放控制
• 进度条可以通过监听音频播放时间来实时更新

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