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

其他 2018-12-21 10:41:12 阅读次数: 0

效果

实现

百度音乐API歌手说明

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

参数： tinguid = 877578 //歌手ting id

歌手页面artists.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>

<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>

获取歌手需要传递歌手的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//返回条目数量

歌手列表跳转路由配置

<div class="artists">
      <ul class="list">
          <router-link tag="li" :to="{name:'ArtistsDetails',params:{avatar:item.avatar_s500,name:item.name,ting_uid:item.ting_uid}}" :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>
        </router-link>
      </ul>
    </div>

改为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组件

<Title :name="this.$route.params.name" :avatar="this.$route.params.avatar"/>

所以最终头像的来源就是请求歌手列表后返回来的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

猜你喜欢

转载自blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84995580
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022