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

最新推荐文章于 2024-07-16 01:25:59 发布
最新推荐文章于 2024-07-16 01:25:59 发布
阅读量919 收藏 2
点赞数
分类专栏： 前端那些骚操作 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84980430
版权

效果

实现

实现导航组件

首先在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作为参数传递给公共组件。

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">
          查看该榜单&gt;
      </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);
      })
  }

最终效果

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

分阶段代码下载位置：

https://download.csdn.net/download/badao_liumang_qizhi/10846557

霸道流氓气质
关注
专栏目录
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 8246
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
vue实现分屏_基于vue项目 实现整屏滚动 -- vue-fullpage 插件的用法
weixin_42298743的博客
12-28 2783
vue-fullpage.js 其实是fullpage.js 的vue.js 官方封装的插件。用法：1.安装npm install --save vue-fullpage.js2.在main.js中引入引入vue-fullpage.js注意：因为vue-fullpage 是基于fullpage的，而fullpage又是基于jQuery的全屏滚动插件，所以操作完以上两步后，我们还缺少一个fullpa...
利用Vue技术实现音乐播放器
04-03
1、利用Vue技术，实现前端音乐播放器 2、功能： a、能够根据人名和歌曲进行搜索。 b、能够根据搜索到的歌曲进行播放。 c、能够显示该歌曲的许多热搜评论。 d、能够将有mv视屏的歌曲进行区分，并且可以点击播放歌曲的mv f、能够在播放器中间显示动态旋转的磁盘，具有美感。 3、技术： 利用Vue,html,css,js,axios等相关技术，对该项目进行一系列的修改和美化。使得该项目变得更加简洁和具有美感。 4、该项目非常适合学习Vue技术的人群进行学习，并且进行Vue和axios的结合，比较适合有一定前端基础，并且正在学习Vue的人群进行学习和练手。
Vue实现简单的音乐播放器
沐小侠
12-17 2282
Vue实现简单的音乐播放器
用vue写一个音频播放器的组件（一）
最新发布
m0_57836225的博客
07-16 824
另外，需要注意的是，在 Vue 3 的 `<script setup>` 语法中，更推荐将相关的变量和函数定义在 `setup()` 内部，以便于更好地组织和管理组件的逻辑，并且能够直接在模板中使用这些响应式数据和方法。需要注意的是，只有在组件挂载后才能访问通过 `ref` 获取的引用，如果在初始渲染时访问，可能会得到 `null`，因为此时对应的元素或组件实例还不存在。- `props` 定义了一个名为 `message` 的属性，其类型为字符串 `String`，默认值为空字符串 `''`。
使用vue实现简易的音乐播放器
qq_42335551的博客
08-06 3979
使用的是font-awesome字体图标 需要先安装 npm install font-awesome --save。代码中使用的ivewUI前端框架。
vue实现音乐播放器
qq_25302061的博客
11-06 1068
地址1：https://github.com/smallskyzzz/my-music（已经初步完成，较为简单，仍在更新中） 演示地址：http://smallsky.top/（建议移动端模式下观看） 手机扫码查看： 地址2：https://github.com/smallskyzzz/vue-music（跟随《Vue 2.0 高级实战-开发移动端音乐 WebApp》课程的学习代码） 新手...
基于vue框架的音乐播放器
weixin_44374938的博客
03-01 909
学了一段时间的vue前端框架，简单的写了一个音乐播放器的，整体界面模仿了网易云音乐的界面，整体上效果还可以。 点解获取项目完整代码 话不多说，效果呈上。
从零开始试图做基于vue实现网易云音乐播放器
08-12
从零开始 ! 试图做基于vue实现网易云音乐播放器
VueQQ音乐播放器
08-12
vue仿写的qq音乐播放器
vue实现循环滚动列表vue-seamless-scroll
热门推荐
boy火巨的博客
08-24 3万+
1.安装 vue-seamless-scroll 实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入，组件配置 import vueSeamlessScroll from 'vue-seamless-scroll' 3.使用 <template> <vue-seamless-scro...
Vue实现仿音乐播放器各阶段代码
12-12
Vue实现仿音乐播放器各阶段代码;Vue实现仿音乐播放器各阶段代码
Node.js-某音乐接口api(极简可用从获取排行榜到歌曲播放url).
08-10
某音乐接口 api，(极简, 可用, 从获取排行榜到歌曲播放 url).
vue 实现简单播放器
zhoulina815的博客
03-05 2272
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js".
vue实现音乐播放器实战笔记
QICHI1018的博客
09-07 660
原文链接：https://blog.csdn.net/Forever201295/article/details/80266600 一、项目说明该播放器的是基于学习vue的实战练习，不用于其他途径。应用中的全部数据来自于 QQ音乐 移动端（https://m.y.qq.com/），利用 jsonp 以及 axios 代理后端请求抓取。 二、目录结构目录/文件 说...
【笔记】vue实现音乐播放器
劲枫的博客
01-17 2107
1、eslintrc.js中添加符合编辑器的规则，参照这里 2、在build/webpack.base.conf.js中找到resolve设置别名，方便在引用路径的时候使用 3、安装依赖：babel-runtime（转移es6语法），fastclick（消除移动端300ms点击延迟），babel-polyfill（可以用es6的api） 4、npm install jsonp再封装成pr...
Vue实现仿音乐播放器13-实现音乐榜单跳转显以及播放效果
BADAO_LIUMANG_QIZHI的博客
12-13 1288
效果 实现 百度音乐获取列表API说明 例：method=baidu.ting.billboard.billList&amp;type=1&amp;size=10&amp;offset=0 参数： type = 1-新歌榜,2-热歌榜,11-摇滚榜,12-爵士,16-流行,21-欧美金曲榜,22-经典老歌榜,23-情歌对唱榜,24-影视金曲榜,25-网络歌曲榜 size = 10 /...
selenium和phantomjs,完成豆瓣音乐排行榜的内容爬取
weixin_30352645的博客
03-13 143
代码要多敲 注释要清晰 哪怕再简单 #使用selenium和phantomjs,完成豆瓣音乐排行榜的内容爬取 #地址：https://music.douban.com/chart #导入需要的模块 from selenium import webdriver import os from lxml import etree import time from bs4...
Vue实现音乐播放器教程：打造炫酷界面
- 虽然示例中提到不考虑手机端兼容，但实际项目中，音乐播放器应考虑适应不同屏幕尺寸，可以使用Vue的`vue-responsive`或`bootstrap-vue`等库实现响应式布局。 在实际开发中，你还需要考虑音乐的加载策略、错误...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值