在上一节歌单详情内容-顶部（音乐app项目-第6步）_Zhichao_97的博客-CSDN博客的基础上，继续实现详情页的图标列表，效果如下图标注区域所示：

流程：

1.在iconfont官网添加所需图标至项目

2.点击复制上图中更新后的链接，替换在index.html中链接

3.修改listViewTop.vue，代码如下：

<template><div class="listViewTop"><img class="bg" :src="playlist.coverImgUrl"><div class="listViewTopNav"><!-- 返回上一页 --><div class="back" @click="$router.go(-1)"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zuojiantou"></use></svg><div class="title">歌单</div></div><div class="right"><svg class="icon search" aria-hidden="true"><use xlink:href="#icon-31sousuo"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gengduo-shuxiang"></use></svg></div></div><div class="content"><div class="contentLeft"><img :src="playlist.coverImgUrl"><div class="count"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofangsanjiaoxing"></use></svg><span>{{changeValue(playlist.playCount)}}</span></div></div><div class="contentRight"><h3>{{playlist.name}}</h3><div class="author"><img class="header" :src="playlist.creator.avatarUrl"><span>{{playlist.creator.nickname}}</span></div><div class="description" style="font-size: 0.24rem;color: #cccccc;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">{{playlist.description}}</div></div></div><div class="iconList"><div class="iconItem"><svg class="icon search" aria-hidden="true"><use xlink:href="#icon-liaotian"></use></svg><span>{{playlist.commentCount}}</span></div><div class="iconItem"><svg class="icon search" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg><span>{{playlist.shareCount}}</span></div><div class="iconItem"><svg class="icon search" aria-hidden="true"><use xlink:href="#icon-yunduanxiazai"></use></svg><span>下载</span></div><div class="iconItem"><svg class="icon search" aria-hidden="true"><use xlink:href="#icon-show_duoxuan"></use></svg><span>多选</span></div></div></div>
</template><script>export default {name: "listViewTop",// 接收父组件的playlistprops:['playlist',],methods:{changeValue:function (num) {let res = 0;if (num>=100000000){res = num/100000000;res = res.toFixed(2) + '亿'}else if (num>10000){res = num/10000;res = res.toFixed(2) + 'w'}return res}},}
</script><style scoped>*{margin: 0;padding: 0;}.listViewTop{width: 7.5rem;padding: 0 0.4rem;height: 6rem;}.listViewTopNav{display: flex;justify-content: space-between;align-items: center;height: 1.2rem;font-size: 0.35rem;}.back,.right{display: flex;color: white;}.icon{width: 0.5rem;height: 0.5rem;fill: #ffffff;}.bg{position: fixed;left: 0;top: 0;width: 7.5rem;height: auto;z-index: -1;filter: blur(40px);  /*设置模糊度*/}.title{margin-left: 0.4rem;}.search{margin-right: 0.5rem;fill: white;}.content{padding: 0.4rem 0;display: flex;justify-content: space-between;}.contentLeft{position: relative;}.contentLeft>img{width: 2.5rem;height: 2.5rem;border-radius: 0.1rem;}.contentLeft>span{position: absolute;right: 0.1rem;top: 0.1rem;}.contentLeft>.count{position: absolute;right: 0.1rem;top: 0.1rem;font-size: 0.24rem;color:#ffffff;display: flex;align-items: center;font-weight: 900;}.contentLeft>.count>.icon{fill: white;width: 0.2rem;height: 0.2rem;}.contentRight{width: 3.8rem;}.contentRight>h3{color: white;}.contentRight>.author{display: flex;align-items: center;margin: 0.2rem 0;}.contentRight>.author>span{color: white;font-size: 0.26rem;}.contentRight>.author>.header{width: 0.6rem;height: 0.6rem;border-radius: 0.3rem;margin-right: 0.2rem;}.iconList{display: flex;justify-content: space-around;  /*平均分布*/text-align: center}.iconList>.iconItem{display: flex;flex-direction: column;align-items: center;text-align: center;}.iconList>.iconItem>.icon{position: relative;left: 0.3rem;width: 0.6rem;height: 0.6rem;fill: white;}.iconList>.iconItem>span{font-size: 0.28rem;color: white;padding-top: 0.2rem;}
</style>

音乐app项目下一节：

歌单详情内容-播放列表（音乐app项目-第8步）_Zhichao_97的博客-CSDN博客

歌单详情内容-图标列表（音乐app项目-第7步）相关推荐

歌单详情内容-播放列表（音乐app项目-第8步）
在上一节歌单详情内容-图标列表 (音乐app项目第7步)的基础上,继续实现歌单详情内容-播放列表,效果如下图标注区域所示: 流程: 1.新建组件playList.vue playList.vue: & ...
全局播放控件（音乐app项目-第10步）
在上一节播放控件 (音乐app项目-第9步)的基础上,希望播放控件能够在所有页面显示,效果如下: 流程: 1.修改index.html 加上如下代码,防止postion:fixed失效: <me ...
实现音乐播放（音乐app项目-第11步）
在上一节(全局播放控件 (音乐app项目-第10步))基础上,继续实现音乐播放的效果如下: 音乐播放器流程: 1.修改全局变量(index.js): import { createStore } f ...
头部导航（音乐app项目-第1步）
实现下图标注区域: 流程: 1.新建子组件topNav.vue topNav.vue: 如果不理解代码中svg引入图标部分的代码,可以参考(iconfont 阿里巴巴矢量图标库在线引入图标_Zhic ...
网易云音乐歌单详情列表爬虫破解
这次我跟大家分享的是关于爬虫加密破解的技术! 由于工作开发的需求,后台需要爬取网易云歌单详情页面(http://music.163.com/#/playlist?id=867413461)的歌单歌曲列 ...
Android简易音乐重构MVVM Java版-新增推荐、雷达歌单详情列表界面（十八）
Android简易音乐重构MVVM Java版-新增推荐.雷达歌单详情列表界面(十八) 关于效果修改ApiService 增加歌单列表实体类RecommendListEntity 新增歌单列表界面 ...
微信小程序之网易云音乐（五）- 排行详情页、歌单详情页、播放器组件开发
微信小程序之网易云音乐(五)- 排行详情页.歌单详情页.播放器组件开发一. 排行详情页模块二. 歌单详情页模块三. 播放器组件微信小程序之网易云音乐导航一. 排行详情页模块 rank.vue ...
音乐歌单Android,[CloudReader]Android - 仿网易云音乐歌单详情页
前段时间模仿网易云音乐UI使用DataBinding做了一个App:CloudReader,今天把其中的类似歌单详情页单独拿出来说一下,我觉得其中还是有些干货的,关联到的知识点还比较有价值,而且也有很 ...
仿网易云android界面,Android - 仿网易云音乐歌单详情页
前段时间模仿网易云音乐UI使用DataBinding做了一个App:CloudReader,今天把其中的类似歌单详情页单独拿出来说一下,我觉得其中还是有些干货的,关联到的知识点还比较有价值,而且也有很 ...

歌单详情内容-图标列表（音乐app项目-第7步）

在上一节歌单详情内容-顶部（音乐app项目-第6步）_Zhichao_97的博客-CSDN博客的基础上，继续实现详情页的图标列表，效果如下图标注区域所示：

流程：

音乐app项目下一节：

歌单详情内容-播放列表（音乐app项目-第8步）_Zhichao_97的博客-CSDN博客

歌单详情内容-图标列表（音乐app项目-第7步）相关推荐

最新文章

热门文章

歌单详情内容-图标列表 （音乐app项目-第7步）

在上一节歌单详情内容-顶部 （音乐app项目-第6步）_Zhichao_97的博客-CSDN博客的基础上，继续实现详情页的图标列表，效果如下图标注区域所示：

流程：

音乐app项目下一节：

歌单详情内容-播放列表 （音乐app项目-第8步）_Zhichao_97的博客-CSDN博客

歌单详情内容-图标列表 （音乐app项目-第7步）相关推荐

最新文章

热门文章

歌单详情内容-图标列表（音乐app项目-第7步）

在上一节歌单详情内容-顶部（音乐app项目-第6步）_Zhichao_97的博客-CSDN博客的基础上，继续实现详情页的图标列表，效果如下图标注区域所示：

歌单详情内容-播放列表（音乐app项目-第8步）_Zhichao_97的博客-CSDN博客

歌单详情内容-图标列表（音乐app项目-第7步）相关推荐