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

vue

Vue实现仿音乐播放器12-实现歌手页面效果

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

生活随笔收集整理的這篇文章主要介紹了 Vue实现仿音乐播放器12-实现歌手页面效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果

實現

百度音樂API歌手說明

例：method=baidu.ting.artist.getInfo&tinguid=877578

參數： tinguid = 877578 //歌手ting id

歌手頁面artists.vue

靜態與頁面布局

獲取歌手需要傳遞歌手的id，先聲明一個id數組

? data(){return{artistsArr:["2517","7994","1091","45561","2507","245815","1077","1204","1117","82366"],artistsData:[]}},

然后請求數據

mounted(){for(var i =0;i<this.artistsArr.length;i++){const artistsURL = this.HOST+"/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid="+ this.artistsArr[i];this.$axios.get(artistsURL).then(res => {console.log(res.data)this.artistsData.push({avatar_s500:res.data.avatar_s500,name:res.data.name,ting_uid:res.data.ting_uid})}).catch(error => {console.log(error);})}} }

然后可以查看請求后返回的數據，以其中一位歌手為例

這樣就可以根據返回的數據的格式來自動的填充要顯示的歌手的頭像以及名字。

完整artist.vue代碼

<template lang="html"><div class="artists"><ul class="list"><li :key="index" class="artist" v-for="(item,index) in artistsData"><div class="pic"><img :alt="item.name" :src="item.avatar_s500"></div><div class="info"><div>{{ item.name }}</div></div></li></ul></div> </template><script> export default {name:"artists",data(){return{artistsArr:["2517","7994","1091","45561","2507","245815","1077","1204","1117","82366"],artistsData:[]}},mounted(){for(var i =0;i<this.artistsArr.length;i++){const artistsURL = this.HOST+"/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid="+ this.artistsArr[i];this.$axios.get(artistsURL).then(res => {console.log(res.data)this.artistsData.push({avatar_s500:res.data.avatar_s500,name:res.data.name,ting_uid:res.data.ting_uid})}).catch(error => {console.log(error);})}} } </script><style scoped>.artists{padding: 0 17px;background: #fff; }.list li {padding-left: 0;min-height: 70px;display: flex;align-items: center;border-bottom: 1px solid #F2F2F2; }.pic{width: 54px;height: 54px;margin-right: 15px; }.info {display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;font-size: 16px; }.pic img{border-radius: 27px;overflow: hidden; }</style>

實現點擊歌手后跳轉到詳情頁面

效果

實現

獲取歌手歌曲列表API說明

例：method=baidu.ting.artist.getSongList&tinguid=877578&limits=6&use_cluster=1&order=2

參數： tinguid = 877578//歌手ting id

limits = 6//返回條目數量

歌手列表跳轉路由配置

改為router-link 使可跳轉，并傳遞參數照片、名字、id

歌手列表頁面artistsDetails.vue

在pages下新建目錄artistsDetail,在其下新建artistsDetail.vue

<template lang="html"><div class=""><Title :name="this.$route.params.name" :avatar="this.$route.params.avatar"/><List :ting_uid="this.$route.params.ting_uid"/></div> </template><script>import Title from "../../components/details/title" import List from "../../components/details/list"export default {name:"details",data(){return{}},components:{Title,List} } </script><style lang="css"> </style>

在這個頁面引入兩個組件list.vue和title.vue

其中title.vue顯示頭像以及歌手名字，list.vue顯示歌曲列表。

新建title.vue

在components下新建detail目錄，然后在下面新建title.vue

<template lang="html"><div class="art-title"><div class="artist-header"><div class="header-bg" :style="{background:'url(http://qukufile2.qianqian.com/data2/pic/ce52b58848ff456cd4d48765f2f3dd1e/267770218/267770218.jpg@s_0,w_240)'}"></div><div class="header-mask"></div><div class="artist-header-content"><div class="pic"><img :src="avatar" /></div><h2>{{ name }}</h2></div> </div></div> </template><script> export default {name:"arttitle",data(){return{arttitle:{}}},props:{name:{type:String,defualt:""},avatar:{type:String,default:""}} } </script><style scoped>.artist-header {width: 100%;height: 160px;position: relative;overflow: hidden;box-sizing: border-box; }.header-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-filter: blur(6px);filter: blur(6px);-webkit-transform: scale(2);transform: scale(2);background-repeat: no-repeat;overflow: hidden; } .header-mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,.85);overflow: hidden; }.artist-header-content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 25px 0; }.pic {width: 80px;height: 80px;-webkit-border-radius: 40px;border-radius: 40px;overflow: hidden;margin: 0 auto; }.artist-header-content h2 {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;font-size: 1.8rem;line-height: 20px;margin-top: 12px;color: #333;font-weight: 400; }</style>

注：

img標簽用來顯示頭像標簽，src屬性為傳遞過來的avatar

在artists.vue中

:to="{name:'ArtistsDetails',params:{avatar:item.avatar_s500,name:item.name,ting_uid:item.ting_uid}}"

傳遞到artists.vue中引入的Title組件

所以最終頭像的來源就是請求歌手列表后返回來的item.avatar_s500，打開這個url可以看到

新建list.vue

同樣在details下新建list.vue來顯示歌曲列表

<template lang="html"><div class="art-list"><ul class="list"><li class="song" v-for="(item,index) in listArr" :key="index"><div class="left">{{ item.title }}</div></li></ul></div> </template><script> export default {name:"artlist",data(){return{listArr:[]}},props:{ting_uid:{type:String,default:"0"}},mounted(){const ArtList = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getSongList&tinguid="+ this.ting_uid +"&limits=10&use_cluster=1&order=2"this.$axios.get(ArtList).then(res => {this.listArr = res.data.songlist}).catch(error => {console.log(error);})} } </script><style scoped>.art-list{padding: 0 17px; }.song{height: 50px;line-height: 50px;border-bottom: 1px solid #999; } .left{font-size: 18; }</style>

注：

API獲取歌手歌曲列表說明

例：method=baidu.ting.artist.getSongList&tinguid=877578&limits=6&use_cluster=1&order=2

參數： tinguid = 877578//歌手ting id

limits = 6//返回條目數量

在list.vue中接受通過? <List :ting_uid="this.$route.params.ting_uid"/>

傳遞過來的id，然后訪問API獲取數據，遍歷顯示。

配置歌手歌曲路由

打開router下的index.js

import ArtistsDetails from "@/pages/artistsDetails/artistsDetails"{path:"artistsdetails",name:"ArtistsDetails",component:ArtistsDetails},

實現歌手的歌曲點擊播放效果

打開list.vue

????? <router-link tag="li" :to="{name:'MusicPlay',params:{songid:item.song_id}}" class="song" v-for="(item,index) in listArr" :key="index"><div class="left">{{ item.title }}</div></router-link>

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

分階段代碼下載位置：

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

總結

以上是生活随笔為你收集整理的Vue实现仿音乐播放器12-实现歌手页面效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Vue实现仿音乐播放器11-实现访问百度
下一篇： Vue实现仿音乐播放器13-实现音乐榜单