微信小程序之網易云音樂（四）- 排行、歌手及歌手詳情頁模塊開發

• 一. 排行模塊開發
• 二. 歌手模塊開發
• 三. 歌手詳情頁開發

微信小程序之網易云音樂導航

一. 排行模塊開發

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

頁面效果如下：

總結

以上是生活随笔為你收集整理的微信小程序之网易云音乐（四）- 排行、歌手及歌手详情页模块开发的全部內容，希望文章能夠幫你解決所遇到的問題。

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