當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue实现仿音乐播放器13-实现音乐榜单跳转显以及播放效果

發布時間：2025/3/19 vue 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue实现仿音乐播放器13-实现音乐榜单跳转显以及播放效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果

實現

百度音樂獲取列表API說明

例：method=baidu.ting.billboard.billList&type=1&size=10&offset=0

參數： type = 1-新歌榜,2-熱歌榜,11-搖滾榜,12-爵士,16-流行,21-歐美金曲榜,22-經典老歌榜,23-情歌對唱榜,24-影視金曲榜,25-網絡歌曲榜

size = 10 //返回條目數量

offset = 0 //獲取偏移

完善榜單頁面listcate.vue

<template lang="html"><div><ListCate_List v-for="item in musicTypeJSON" :musicType="item" /></div> </template><script>import MusicType from "../assets/data/musictype.json" import ListCate_List from "../components/ListCate_List"export default {data(){return{musicTypeJSON:[]}},components:{ListCate_List},created(){this.musicTypeJSON = MusicType.currentType} } </script><style lang="css"> </style>

讀取json文件

在assets下的data下新建musictype.json

{"currentType":[1,2,11,21,22,23,24,25] }

用來存取獲取列表的音樂類型

json文件位置：

listcate.vue

注：

是通過import MusicType from "../assets/data/musictype.json"? 引入的

然后通過? this.musicTypeJSON = MusicType.currentType 賦值給musicTypeJSON，然后通過

? <ListCate_List v-for="item in musicTypeJSON" :musicType="item" />

循環遍歷取值。

然后再ListCast_List.vue中直接通過：

? props:{musicType:{type:[String,Number],default:1}},mounted(){const ListCateUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+this.musicType+"&size=3&offset=0"this.$axios.get(ListCateUrl).then(res => {console.log(res.data)this.listCateData = res.data}).catch(error => {console.log(error);})} }

獲取并使用。

注：

json數據是通過import MusicType from "../assets/data/musictype.json"? 引入的

然后通過? this.musicTypeJSON = MusicType.currentType 賦值給musicTypeJSON，然后通過

? <ListCate_List v-for="item in musicTypeJSON" :musicType="item" />

循環遍歷取值。

然后再ListCast_List.vue中直接通過：

獲取并使用。

在components下新建ListCate_List.vue

用來實現榜單列表

<template lang= "html"><div class= "listcate"><div? tag="div" class= "cate-item"><div class= "item-content"><div class="cate-post"><img :src="listCateData.billboard.pic_s192" :alt="listCateData.billboard.name"></div><ul class= "cate-hot"><li v-for="(item,index) in listCateData.song_list"><span class="col-rank" :title="item.rank">{{ item.rank }}</span><span class="col-title">{{ item.title }} - {{ item.author }}</span></li></ul></div ></div></div> </template><script> export default {name:"listcatelist",data(){return{listCateData:{song_list:[],billboard:{}}}},props:{musicType:{type:[String,Number],default:1}},mounted(){const ListCateUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+this.musicType+"&size=3&offset=0"this.$axios.get(ListCateUrl).then(res => {console.log(res.data)this.listCateData = res.data}).catch(error => {console.log(error);})} } </script><style lang="css">.listcate{padding: 0 17px 20px;font-size: 16px;background: #fff; }.cate-item {border-bottom: 1px solid #eee;padding: 20px 0; }.item-content {display: flex; }.cate-post {position: relative;color: #fff;font-size: 18px;height: 96px;width: 96px; }.cate-post img {width: 100%;height: 100%; }.cate-item .cate-hot {flex: 1;margin-left: 14px;padding: 6px 0; }.cate-item .cate-hot li {padding: 6px 0;height: 17px;display: flex;flex-direction: row;align-items: center;color: #666;font: 15px 700; }.cate-item .cate-hot li .col-rank {color: #fa6644;font-family: Arial;font-weight: 700;font-style: italic; } .cate-item .cate-hot li .col-title {line-height: 17px;color: #343434;text-indent: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex: 1;width: 140px; }</style>

注：

可以輸出以下看API返回的數據：

1.照片數據為：listCateData.billboard.pic_s192

我們可以打開這個url

2.作者、序號、標題屬性

<span class="col-rank" :title="item.rank">{{ item.rank }}</span> <span class="col-title">{{ item.title }} - {{ item.author }}</span>

至此已經實現，點擊榜單會顯示榜單列表，下面實現點擊每個榜單進入榜單詳情頁面。

實現榜單詳情

配置路由跳轉

在ListCate_List.vue配置路由跳轉

? <router-link tag="div" :to="{name:'LicateDetails',params:{musictype:musicType}}" class="item-content"><div class="cate-post"><img :src="listCateData.billboard.pic_s192" :alt="listCateData.billboard.name"></div><ul class="cate-hot"><li v-for="(item,index) in listCateData.song_list"><span class="col-rank" :title="item.rank">{{ item.rank }}</span><span class="col-title">{{ item.title }} - {{ item.author }}</span></li></ul></router-link>

路由跳轉到ListDetails,傳遞參數音樂類型musicType

新建licateDetail.vue

在pages下新建licateDetails目錄，然后在下面新建licateDetails.vue

接受路由參數并請求歌曲列表數據

詳情路由配置

打開router下的index.js

import LicateDetails from "@/pages/licateDetails/licateDetails"{path:"artistsdetails",name:"ArtistsDetails",component:ArtistsDetails},{path:"licatedetails",name:"LicateDetails",component:LicateDetails}

配置點擊歌曲播放，前面以及講過，不再贅述。

至此音樂榜單數據顯示、跳轉、詳情功能已經完成。

此部分代碼對應分階段代碼中階段十

分階段代碼下載位置：

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

總結

以上是生活随笔為你收集整理的Vue实现仿音乐播放器13-实现音乐榜单跳转显以及播放效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue实现仿音乐播放器12-实现歌手页面
下一篇： Vue实现仿音乐播放器14-实现搜索页面