微信小程序之网易云音乐(四)- 排行、歌手及歌手详情页模块开发
微信小程序之网易云音乐(四)- 排行、歌手及歌手详情页模块开发
- 一. 排行模块开发
- 二. 歌手模块开发
- 三. 歌手详情页开发
微信小程序之网易云音乐导航
一. 排行模块开发
rank.vue
文件:
<template><view class="rank"><view class="rank-content"><view class="rank-list" v-for="(item,index) in rankList" :key="index"><view class="icon"><image :src="item.coverImgUrl"></image></view><view class="song-list"><span class="song" v-for="(song,index) in item.rank" :key="index"><span class="index">{{index+1}}</span><span class="name">{{song.name}} - {{song.ar[0].name}}</span></span></view></view></view></view>
</template><script>export default {data() {return {rankList: [],}},onLoad() {var serverUrl = this.serverUrl// 获取歌单列表,下面的Id都是从这里面获取的// uni.request({// url: serverUrl + '/toplist,// method: 'GET',// success: (res) => {// if (res.data.code === 200) {// res.data.list// }// }// })var NUMBER = [19723756, 3779629, 2884035, 3778678, 71384707, 10520166]for (let i = 0; i < NUMBER.length; i++) {uni.request({url: serverUrl + '/top/list?id=' + NUMBER[i],method: 'GET',success: (res) => {if (res.data.code === 200) {let list = res.data.playlistthis.rankList.push(list)list.rank = res.data.playlist.tracks.slice(0, 3)}}})}},methods: {}}
</script><style>@import url("rank.css");
</style>
rank.css
文件:
.rank-list{display: flex;margin: 0 20rpx;padding: 6rpx;border-bottom: 1px solid #e4e4e4;
}
.icon{flex:0 0 200rpx;height: 200rpx;width: 200rpx;
}
image{width: 100%;height: 100%;
}
.song-list{flex:1;display: flex;flex-direction: column;justify-content: center;padding: 0 20rpx;height: 200rpx;font-size: 11px;overflow: hidden;
}
.song{padding: 20rpx 0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.index{padding: 0 10rpx;
}
效果如下:
二. 歌手模块开发
singer.vue
文件:
<template><view class="singer"><ul><view class="list-item" v-for="item in singerList" :key="item.id"><image :src="item.img1v1Url" class="avatar"></image><span class="name">{{item.name}}</span></view></ul></view>
</template><script>export default {data() {return {singerList:[],}},onLoad(){var serverUrl = this.serverUrluni.request({url: serverUrl + '/top/artists?limit=70',method: 'GET',success: (res) => {if (res.data.code === 200) {this.singerList = res.data.artists}}})},methods: {}}
</script><style>
@import url("singer.css");
</style>
singer.css
文件:
.list-item {display: flex;align-items: center;margin: 0 10rpx;padding: 10rpx 0;border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.avatar{width: 100rpx;height: 100rpx;border-radius: 3px;
}
.name{margin-left: 40rpx;font-size: 14px;
}
App.vue
文件添加样式:
td{margin: 0;padding: 0;
}
body{background: #ff;color: #555;font-size: 14px;font-family: Verdana,Arial, Helvetica, sans-serif;
}
效果如下:
三. 歌手详情页开发
rank.vue
页面修改:
<template><view class="singer"><ul><navigator class="list-item" v-for="item in singerList" :key="item.id":url="'/pages/singer-detail/singer-detail?item=' + encodeURIComponent(JSON.stringify(item))"><image :src="item.img1v1Url" class="avatar"></image><span class="name">{{item.name}}</span></navigator></ul></view>
</template>
新建singer-detail
页面:
singer-detail.vue
文件:
<template><view><image class="bg-image" :style="bgStyle"></image><view class="song-list"><ul><view class="item " v-for="(song,index) in hotSongs" :key="index"><view class="list"><h2 class="name">{{song.name}}</h2><p class="desc">{{song.ar[0].name}}</p></view></view></ul></view></view>
</template><script>export default {data() {return {hotSongs: [],list: [],}},computed: {bgStyle() {return `background-image:url(${this.list.picUrl})`}},onLoad(option) {const item = JSON.parse(decodeURIComponent(option.item))this.list = itemvar serverUrl = this.serverUrluni.request({url: serverUrl + `/artists?id=${item.id}`,method: 'GET',success: (res) => {if (res.data.code === 200) {this.hotSongs = res.data.hotSongs}}})},methods: {}}
</script><style>
@import url("singer-detail.css");
</style>
singer-detail.css
文件:
.bg-image{height: 0;padding-top: 70%;transform-origin: top;background-size: cover;width: 100%;z-index: 100;position: fixed;
}.song-list{position: absolute;top:530rpx;overflow: hidden;width: 90%;margin-left: 30rpx;
}
.item{display: flex;align-items: center;box-sizing: border-box;height: 128rpx;font-size: 14px;border-bottom: 1px solid #ccc;
}
.name{color: #2E3030;
}
.desc{margin-top: 8rpx;color: #757575;
}
页面效果如下:
微信小程序之网易云音乐(四)- 排行、歌手及歌手详情页模块开发相关推荐
- 微信小程序之网易云音乐(三)- 主页面底部导航、轮播图、歌单及歌曲模块开发
微信小程序之网易云音乐(三)- 主页面底部导航.轮播图.歌单及歌曲模块开发 前言 一. 主页面底部导航 二. 轮播图区域 三. 歌单区域 四. 歌曲区域 微信小程序之网易云音乐导航 前言 创建一个新模 ...
- 微信小程序之网易云音乐导航
微信小程序之网易云音乐导航 微信小程序之网易云音乐(一)- uni-app的基本使用 微信小程序之网易云音乐(二)- uni-app标签的使用 微信小程序之网易云音乐(三)- 主页面底部导航.轮播图. ...
- 微信小程序之网易云音乐(五)- 排行详情页、歌单详情页、播放器组件开发
微信小程序之网易云音乐(五)- 排行详情页.歌单详情页.播放器组件开发 一. 排行详情页模块 二. 歌单详情页模块 三. 播放器组件 微信小程序之网易云音乐导航 一. 排行详情页模块 rank.vue ...
- 微信小程序仿网易云音乐(使用云开发,提供源码)
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
- 微信小程序之网易云音乐(一)- uni-app的基本使用
微信小程序之网易云音乐(一)- uni-app的基本使用 前言 一. uni-app 1.1 利用HBuilder来进行开发: 二. 案例 2.1 案例1:MVC以及数据双向绑定 2.2 案例2:响应 ...
- 微信小程序调用网易云音乐接口
微信小程序调用网易云音乐接口 前段时间QQ音乐的调用接口不能用了,给大家整理了一个网易云音乐的调用接口. 1.API接口: API接口地址 2.访问连接地址: http://neteasecloudm ...
- 微信小程序【网易云音乐实战】(第二篇 轮廓图、阿里巴巴的矢量图标、滚动条、前后端交互、列表渲染)
下面通过webStrom来写代码,通过微信开发者工具来调试! 本篇最终效果图: 这里写目录标题 一.轮播图 二. 五个小图标 1. 将阿里巴巴矢量图标转换为本地的 2. 项目使用图标 三.滚动条 sc ...
- 微信小程序之网易云音乐小案例
目录 一.编写对网易云音乐api发起请求的代码 二.编写视频项(组件) 三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现]) 四.编写视频详情页 成品图: 准备工作: --在page ...
- 微信小程序【网易云音乐实战】(第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据)
一.转发分享功能 onShareAppMessage(Object object) Button <button open-type="share" class=" ...
最新文章
- 仅用2年过渡到自研ARM芯片,苹果的底气从何而来?
- WPF快速指导1:资源
- 软件开发中的几种数据交换协议
- GPGPU OpenCL 获取kernel函数编译信息
- 【渝粤教育】国家开放大学2018年秋季 2409T中国古代文学(B)(1) 参考试题
- 矩阵计算 动手学深度学习 pytorch
- 奇迹按键精灵挂机脚本_奇迹挂机捡物按键精灵源码
- NFT抢购合集工具(免费)
- Leetcode 037 解数独 思路详解 python
- Linux IP、DNS、Route配置
- 无人机通信信道模型实现代码
- 腾讯企业邮箱使用简单说明
- Tomcatnbsp;Servletnbsp;JSPamp;nbs…
- nba2k 服务器支持,NBA2K Online篮球在线官方网站-拼出你的传奇-腾讯游戏
- source insight 设置窗口滑动条
- Python学习笔记:个税起征点上调至5000,算一算少交多少税?
- 修道士与野人问题——C++源代码,伪代码,详细分析
- 土壤水分传感器与介电常数的区别
- 南京邮电大学物理实验模拟试卷
- 数据仓库 Hive(2)