Vue实现仿音乐播放器7-实现音乐榜单效果

雨点打透心脏的1/2处 2023-10-18 12:31 31阅读 0赞

## 效果 ##

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

## 实现 ##

### 实现导航组件 ###

首先在pages目录下新建musiclist目录，然后在其下新建导航组件music\_listnav.vue

<template lang="html">
      <div class="music-nav">
        <div class="log url hd">
            <h2>音乐榜单</h2>
            <div>更多</div>
        </div>
        <ul>
          <li>
            <router-link to="/home/hot">热歌榜</router-link>
            <span class="gap-line"> </span>
          </li>
          <li>
            <router-link to="/home/news">新歌榜</router-link>
            <span class="gap-line"> </span>
          </li>
          <li>
            <router-link to="/home/king">King榜</router-link>
            <span class="gap-line"> </span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
    }
    </script>
    
    <style scoped>
    
    .music-nav{
        background-color: #fff;
        margin-top: 10px;
        padding: 10px 17px;
    }
    
    .hd {
        margin: 14px 0 18px 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    
    .hd h2 {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        margin: 0;
        padding: 0;
        font-size: 20px;
    }
    
    .hd {
        margin-bottom: 0;
    }
    
    ul{
        display: flex;
    }
    
    ul li{
      padding: 18px 0 12px 0;
      font-size: 16px;
      flex: 1;
      text-align: center;
      color: #999;
      position: relative;
      z-index: 2;
    }
    
    ul li a{
      display: block;
    }
    
    ul li a.active{
      color: #299DE7 !important;
    }
    .gap-line {
        position: absolute;
        right: 0;
        top: 20px;
        height: 18px;
        width: 1px;
        border-left: 1px solid #eee;
    }
    
    </style>

### 在home.vue中引入导航组件 ###

<template lang="html">
      <div class="">
        <TodayRecommend/>
        <NewsMusic />
        <SwiperBanner/>
        <MusicListNav />
        <router-view />   
      </div>
    </template>
    
    <script>
    import TodayRecommend from "../components/Today_Recommend"
    import NewsMusic from "../components/News_Music"
    import SwiperBanner from "../components/Swiper_Banner"
    import MusicListNav from "./musiclist/music_listnav"
    export default {
        name:"home",
        components:{
        TodayRecommend,
        NewsMusic,
        SwiperBanner,
        MusicListNav
        }
    }
    </script>
    
    <style lang="css">
    </style>

### 导航组件中实现三个组件的导航 ###

音乐榜单下有个导航页面组件music\_list.vue,它能导航到hot\_list.vue热歌榜页面组件，king\_list.vue King榜页面组件，news\_list.vue新歌榜页面组件，这三个页面组件布局一致，但是请求的数据不同，所以这三个页面都引入了公共组件music\_List.vue，并且各自将请求的url作为参数传递给公共组件。

![Image 1][]![20181212222123851.jpg][]

### music\_listnav.vue ###

<template lang="html">
      <div class="music-nav">
        <div class="log url hd">
            <h2>音乐榜单</h2>
            <div>更多</div>
        </div>
        <ul>
          <li>
            <router-link to="/home/hot">热歌榜</router-link>
            <span class="gap-line"> </span>
          </li>
          <li>
            <router-link to="/home/news">新歌榜</router-link>
            <span class="gap-line"> </span>
          </li>
          <li>
            <router-link to="/home/king">King榜</router-link>
            <span class="gap-line"> </span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
    }
    </script>
    
    <style scoped>
    
    .music-nav{
        background-color: #fff;
        margin-top: 10px;
        padding: 10px 17px;
    }
    
    .hd {
        margin: 14px 0 18px 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    
    .hd h2 {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        margin: 0;
        padding: 0;
        font-size: 20px;
    }
    
    .hd {
        margin-bottom: 0;
    }
    
    ul{
        display: flex;
    }
    
    ul li{
      padding: 18px 0 12px 0;
      font-size: 16px;
      flex: 1;
      text-align: center;
      color: #999;
      position: relative;
      z-index: 2;
    }
    
    ul li a{
      display: block;
    }
    
    ul li a.active{
      color: #299DE7 !important;
    }
    .gap-line {
        position: absolute;
        right: 0;
        top:20px;
        height:18px;<BR>    width: 1px;
        border-left: 1px solid #eee;
    }
    
    </style>

### hot\_list.vue 、king\_list.vue、news\_list.vue ###

这三个组件页面代码一致，不同的是传递给公共组件music\_List.vue的url参数不同，进而请求的数据不同。

<template lang="html">
      <div class= "">
        <MusicList :url="url" />
      </div>
    </template>< /P>
    
    <script>< /P>
    
    import MusicList from "../../components/Music_List"
    
    export default {
     data(){<BR>    return{
          url:"要请求的url"
        }
      },
      components:{
        MusicList
      }
    }
    </script>
    
    <style lang="css">
    </style>

### 公共组件music\_List.vue ###

<template lang= "html">
      <div class="board panels">
        <div class="panel hotsongs on">
          <ul class= "list">
            <li class="song url" v-for="(item,index) in currentData" :key= "index">
              <div class= "poster">
                <img :src="item.pic_big" :alt= "item.title">
              </div>
              <div class="info">
                <div class= "name">
                    {
       { item.title }}
                </div>
                <div class="author">{
       { item.artist_name }}</div>
              </div>
            </li>
          </ul>
          <div class="more-songs url">
              查看该榜单>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          currentData:[]
        }
      },
      props:{
        url:{
          type:String,
          default:""
        }
      },
      mounted(){
        const httpUrl = this.HOST+this.url;
        this.$axios.get(httpUrl)
          .then(res = > {
            this.currentData = res.data.song_list
          })
          .catch(error = > {
            console.log(error);
          })
      }
    }
    </script>
    
    <style scoped>
    
    <P>.board{
      margin-bottom:10px;
    }
    
    
    
    .panel {
        border-top: 1px solid #eee;
        position: relative;
        top: -1px;
        display: block;
        background: #fff;
    }
    
    .list{
      padding: 20px;
      padding-top: 0;
    }
    
    .panel .list li {
        height: 60px;
        border-bottom: 1px solid #eee;
        padding-left: 0;
        display: flex;
        padding-top: 10px;
    }
    
    .panel .list li .poster {
        position: relative;
        width: 45px;
        margin-right:8px;
    }
    
    .panel .list li .poster img {
        border: 1px solid #eee;
    }
    .info{
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .info .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        color: #333;
    }
    
    .info .author {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: #999;
        margin-top: 2px;
    }
    
    .more-songs {
        color: #999;
        margin-top: 9px;
        font-size: 12px;
        text-align: center;
        height: 32px;
        line-height: 32px;
    }
    
    
    </style>

### 配置路由 ###

### 打开router下的index.js ###

{
          path: '/',
          name: 'Index',
          redirect:"/home",
          component: Index,
          children:[
            {
              path: 'home',
              component: Home,
              redirect:"/home/hot",
              children:[
                {
                  path:"hot",
                  component:HotList
                },
                {
                  path:"king",
                  component:KingList
                },
                {
                  path:"news",
                  component:NewsList
                }
              ]
            },

home页面本身就是index的子路由，而热歌榜、新歌榜、KIng榜都是home的子路由。

最终index.js代码：

import Vue from 'vue'
    import Router from 'vue-router'
    import Index from '@/pages/index'
    import Home from "@/pages/home"
    import Artists from "@/pages/artists"
    import ListCate from "@/pages/listcate"
    import Ucenter from "@/pages/ucenter"
    import Search from "@/pages/search"
    import HotList from "@/pages/musiclist/hot_list"
    import KingList from "@/pages/musiclist/king_list"
    import NewsList from "@/pages/musiclist/news_list"
    Vue.use(Router)
    
    export default new Router({
      routes: [
    
          {
          path: '/',
          name: 'Index',
          redirect:"/home",
          component: Index,
          children:[
            {
              path: 'home',
              component: Home,
              redirect:"/home/hot",
              children:[
                {
                  path:"hot",
                  component:HotList
                },
                {
                  path:"king",
                  component:KingList
                },
                {
                  path:"news",
                  component:NewsList
                }
              ]
            },
            {
                path:"artists",
                component:Artists
              },
              {
                path:"listcate",
                component:ListCate
              },
              {
                path:"ucenter",
                component:Ucenter
              },
              {
                path:"search",
                component:Search
              }
          ]
        }
    
      ]
    })

### 添加缓存 ###

为了防止每次点击榜单都要重新加载数据，配置缓存

在home.vue中

<keep-alive>
          <router-view />
     </keep-alive>

这样，只有第一次加载，后面再点击就不会再加载了。

### 讲解 ###

1.在home.vue页面有引入了music\_listnav.vue导航组件，在导航组件中通过router-link以及index.js中的配置实现路由跳转到三个榜单组件。

2.在三大榜单组件中，引入了 公共组件

通过 <MusicList :url= "url"/>给引用的组件 传递一个参数url，而这个参数在

export default {
      data(){
        return{
          url:"要赋值的参数"<BR>    }

给参数赋值。

3.公共组件接受参数

在公共组件中通过：

props:{
        url:{
          type:String,
          default:""
        }

来接受传递的参数。

然后将接受的参数作为请求数据的url来请求不同的数据

mounted(){
        const httpUrl = this.HOST+this.url;
        this.$axios.get(httpUrl)
          .then(res => {
            this.currentData = res.data.song_list
          })
          .catch(error => {
            console.log(error);
          })
      }

## 最终效果 ##

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

此部分代码对应分阶段代码中阶段四

分阶段代码下载位置：

[https://download.csdn.net/download/badao\_liumang\_qizhi/10846557][https_download.csdn.net_download_badao_liumang_qizhi_10846557]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181212222535204.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20181212222123851.jpg]: https://img-blog.csdnimg.cn/20181212222123851.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181212222541823.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_badao_liumang_qizhi_10846557]: https://download.csdn.net/download/badao_liumang_qizhi/10846557