图标和播放列表实现

1、收藏、评论和分享图标
2、播放列表

其他页面可以看我页面专栏 Vue3实战项目-网易云APP 。
如果文章对你有帮助请点一个赞或收藏

1、收藏、评论和分享图标

接下来，我们实现这个位置，首先给新建一个子组件listviewIcon.vue，并且在listview.vue注册一下，并把参数传递给子组件

然后，我们在子组件中把我们用的图标弄好

<template><div class="listviewIcon"><div class="collectIcon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shoucangjia"></use></svg></div><div class="commentIcon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-pinglun-"></use></svg></div><div class="shareIcon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg></div></div>
</template>

然后我们给这个大的div盒子一个边框然后利用flex横排列，并且使盒子居中

.listviewIcon{width: 5rem;display: flex;justify-content: space-around;border: 1px solid red;border-radius: 20px;padding: 10px;margin: 0.7rem auto;background: #fff;
}

然后我们把评论数这些接收一下，放在页面上。

    <div class="listviewIcon"><div class="collectIcon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shoucangjia"></use></svg><p>{{playlist.subscribedCount}}</p></div><div class="commentIcon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-pinglun-"></use></svg><p>{{playlist.commentCount}}</p></div><div class="shareIcon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg><p>{{playlist.shareCount}}</p></div></div>

左右很排列居中一下。

    .listviewIcon div:nth-child(n){display: flex;justify-content: center;align-items: center;}

然后给出了第一个，其他两个加一个左竖线

    .listviewIcon div:nth-child(n + 2) {        //n+2就是从第二个元素开始往后所有的元素border-left: 1px solid rgba(77, 77, 77, 0.5);padding-left: 20px;}

然后这个就做好了。我们把页面的返回做一下，点击返回图标返回到主页

这里很简单，只需要设置一下路由的返回就可以了，我们找到这个图标在listviewTop.vue下，添加点击命令

                <!-- 返回按钮 --><div class="back" @click="$router.back()"></div>

2、播放列表

然后，我们来做播放列表

然后这里我稍微调整了一下，图标列表和播放列表一个在上面一个在下面，跟头像的原理一样，然后我做了一下调整，在listviewIcon.vue下，新增下面这几个

    position: absolute;z-index: 1;left: 0.7rem;top: 4.5rem;

删除了自动居中，阴影调小了一点

然后调整一下playlistView.vue的顶部距离

.playlistView{width: 7.5rem;background-color: rgb(255, 255, 255);margin-top:1rem;
}

然后这个弧线，由于我始终都没有实现就没有写.那么我们先把图标填上，

      <!-- 图标栏 --><div class="playlistIcon"><div class="leftIcon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofang"></use></svg><p  class="words">播放全部</p><p class="count">({{playlist.tracks.length}})</p></div><div class="rightIcon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiazai"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-quanxuan"></use></svg></div></div><!-- 播放列表栏 --><div class="playlists"></div>

注意这里的20是请求歌单的数量，还是需要在listview.vue上设置

然后子组件接收一下，父组件传过来的数据，然后我们调整一下样式

    .icon{width: 0.5rem;height: 0.5rem;}.words{margin-right: 5px;line-height: 0.5rem;}.count{font-size: 10px;line-height: 0.5rem;}
.playlistIcon{display: flex;justify-content: space-between;align-items: center;
}
.playlistIcon div:nth-child(n){display: flex;justify-content: space-between;align-items: center;
}
.rightIcon svg:nth-child(1){margin-right: 15px;
}
.leftIcon svg:nth-child(1){margin-right: 15px;fill: red;
}

这上面的图标部分，我们就完成了，接下来我们做列表的部分,里面的数据是接口tracks部分的，al代表的是专辑，ar代表的是作者

      <!-- 播放列表栏 --><div class="playlists"><div class="playItem" v-for="(item,i) in playlist.tracks" :key="i"><!-- 列表左边区域 --><div class="left"><!-- 编号 --><div class="index">{{i+1}}</div><div class="content"><!-- 音乐名 --><div class="title">{{item.name}}</div><!-- 作者名和专辑名 --><div class="anthor">{{item.ar[0].name}}-{{item.al.name}}</div></div></div><!-- 列表右边区域 --><div class="right"><!-- 图标部分 --><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofang"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gengduo-shuxiang"></use></svg></div></div></div>

然后都是左右分布的形式，我们把它弄成一个左右分布利用flex

.playlists{.playItem{display: flex;justify-content: space-between;.left{display: flex;justify-content: space-between;.content{}  }}
}

然后再来调整字体大小颜色，先从左边开始，调整编号

            .index{width: 0.5rem;font-size: 20px;opacity: 0.5;display: flex;justify-content:center; align-items:center; }

然后，在调整一下，音乐名和专辑

            .content{margin-left: 0.4rem;.anthor{font-size: 10px;opacity: 0.5;}}

现在调整右边的按钮，给它透明度调低，边距调整一下

        .right{.icon{width: 0.5rem;height: 0.5rem;opacity: 0.5;margin-left: 15px;}}

Vue3+node.js网易云音乐实战项目(六)相关推荐

Vue3+node.js网易云音乐实战项目(五)
推荐歌单详细页面顶部 1.推荐歌单详细页面 1.1.导航条和背景 1.2.头像和简介 1.3.头部完整代码 1.4.链接实现效果 1.推荐歌单详细页面 1.1.导航条和背景推荐歌单页面做好后,我们 ...
Vue3+node.js网易云音乐实战项目(三)
页面一.头部导航栏布局二.轮播图的实现三.请求网易的banner图四链接一.头部导航栏布局首先我们看最上面这里的布局,大致可分为三个模块,顶部左边,顶部中间,顶部右边那么我们在comp ...
Vue3+node.js网易云音乐实战项目(八)
播放界面实现 1.准备工作 2.顶部布局 3.中部唱片部分布局 4.底部部分布局最后一个页面还没写完,由于我要去比赛,所以暂时先写到这,等放假了再写其他页面可以看我页面专栏 Vue3实战项目-网易 ...
Vue3+node.js网易云音乐实战项目(七)
底部播放按钮和播放功能的实现 1.底部播放组件 2.音乐播放与暂停 3.切换歌曲其他页面可以看我页面专栏 Vue3实战项目-网易云APP . 大家觉得有些地方可以写的更好写法可以给我留言私信,我会去 ...
react 网易云音乐实战项目笔记
0.项目规范一.路由相关 npm i react-router-dom npm i react-router-config // 用于配置路由映射的关系数组 1. 路由重定向访问 /路径 => ...
开源的网易云音乐API项目都是怎么实现的？
上一篇文章这个高颜值的开源第三方网易云音乐播放器你值得拥有介绍了一个开源的第三方网易云音乐播放器,这篇文章我们来详细了解一下其中使用到的网易云音乐api项目NeteaseCloudMusicApi的实 ...
node实现网易云音乐项目前后端连接
1完善网易云音乐.读取静态资源.实现用户登录以后,登录的内容转换成欢迎XXXX登录后台文件代码 const fs=require('fs'); const http=require('http'); ...
[Vue仿网易云音乐实战]炎炎夏日——放首自己喜欢的歌
前言基于 Vue + vuex + vue-router + vue-axios +better-scroll + Stylus + px2rem 等开发的移动端音乐App,UI 界面是看着自己手机 ...
一个开源的网易云音乐api项目
昨天在Github上发现了一个开源的音乐api项目,restful风格,Json格式,提供的功能真的是史上最全,足够你开发一款属于自己的客户端了.而且作者非常贴心,除了开源了这个项目外还提供了一份详细 ...

Vue3+node.js网易云音乐实战项目(六)

图标和播放列表实现

1、收藏、评论和分享图标

2、播放列表

Vue3+node.js网易云音乐实战项目(六)相关推荐

最新文章

热门文章