Framework7+Vue.js Spotify播放器 - 实例详解（3）

参考：Framework7+Vue.js Spotify播放器 - 实例详解（1）
Framework7+Vue.js Spotify播放器 - 实例详解（2）
回顾一下：

1. 用Template模板初始化
2. 添加 Font Awesome Icon 图标库
3. Framework7 View和Page概念
4. 更新main视图
5. 自定义样式文件CSS
6. 初始化App应用，关联slider和显示的数值
7. 调用Spotify API，处理返回数据
8. 新的List页面（搜索结果）

9. media页面（歌曲详情）

当我们点击搜索结果里某一首歌曲，需要打开歌曲详情页面，并且能够播放

新建media.vue：

• 添加组件props: ['mediaId']。动态路由，以歌曲Id为索引，会自动添加到props里，这样详情页面就知道需要展示哪首歌曲了
• 组件mounted时，引入store.searchTracks
• 数据访问：searchTracks[mediaId]
• 本页面不需要工具栏，设置page.no-toolbar

# \spotifyApp\src\assets\vue\Media.vue

Media.vue添加到路由：

# \spotifyApp\src\routes.js
export default [
  {
    path: '/list/',
    component: require('./assets/vue/List.vue')
  },
  {
    path: '/media/:mediaId/',
    component: require('./assets/vue/Media.vue')
  }
]

List.vue里，以路由名+Index访问就行，实际运行时就像/media/0/、/media/1/、/media/2/：

# \spotifyApp\src\assets\vue\List.vue
 

为了页面美观，main.css里作了一些小调整：

# \spotifyApp\src\assets\css\main.css
.statusbar-overlay {
    background: #000000;
}
i.icon.icon-spotify {
    width: 29px;
    height: 29px;
    background-image: url("../images/spotify.png");
    margin-right: 3px;
}
/* Item View bottom action buttons */
li.bottom {
    position: fixed;
    bottom: 0px;
    width: 100%;
}
/* Add space before actual range val */
.rangeVal {
    padding-left: 5px;
}
.list-block {
    margin: 10px 0 !important;
}
/* Format content headers */
.content-block-title {
    margin: 18px 15px 10px;
}
/* Format the long track titles */
.list-block .item-title {
    white-space: inherit;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Formats the Popularity Rank title to display slider better */
.list-block .item-title.label {
    width: 50%;
}

img.detail {
  max-width: 100%;
}

.list-block .item-media {
  flex-shrink: 1;
}

到此，你的页面应该像这样：

Paste_Image.png

10. 更多Mobile App元素：侧边栏Sidebar和元素左滑右滑Swipeout

手机应用，都会用到这种侧边栏Sidebar:

Paste_Image.png

很简单，在main.vue里添加side panel：

• f7-panel：定义在f7-views之外，因为是全局共享的，子页面也需要打开Sidebar
• f7-panel left reveal：定义在左侧出现，reveal是不覆盖原页面内容。如果需要覆盖效果，使用cover就行
• 打开sidebar：F7已经默认写好了，使用就行，简单吧？
• 关闭sidebar：点击侧边栏外面，就自动关闭了。当然，你也可以添加按钮，手动触发关闭事件
• @click，methods: {} 对于选项，添加点击事件处理就行。
• TODO：点击About，打开“about.vue”页面，你来试一试吧！

# \spotifyApp\src\main.vue