#yyds干货盘点#杨校老师课堂之微信小程序音乐播放器(中)

首先编写外围框架 1.1 页面布局: //...此处省略是下面的 轮播图、基础功能、热门金曲等页面代码 1.2 页面样式 .content-info{ height: 100%; } 2. 编写轮播图 2.1页面结构： 2.2页面样式： /* 轮播图 */ .content-info-banner{ height: 300rpx; margin-bottom: 20px; } .content-info-banner image{ width: 100%; height: 100%; } 3.编写基础功能布局 3.1页面结构： 热门FM 每日歌曲推荐 新歌排行榜 3.2页面样式： /* 基础功能 */ .content-info-portal{ display: flex; margin-bottom: 15px; } .content-info-portal>view{ flex: 1; font-size: 11pt; text-align: center; } .content-info-portal>view image{ width: 120rpx; height: 120rpx; display: block; margin: 20rpx auto; } 4.编写热门歌曲页面结构 4.1页面结构： 歌曲推荐 一环之歌 二环之歌 三环之歌 四环之歌 五环之歌 六环之歌 4.2页面样式： /* 热门金曲 */ .content-info-list{ font-size: 12pt; margin-bottom: 20rpx; } .content-info-title{ margin: 20rpx 35rpx; } .content-info-list>.list-inner{ display: flex; flex-wrap: wrap; margin: 0 20rpx; } .content-info-list>.list-inner>.list-item{ flex: 1; } .content-info-list>.list-inner>.list-item>image{ display: block; margin: 0 auto; border: 1rpx solid #555; width: 200rpx; height: 200rpx; border-radius: 10rpx; } .content-info-list>.list-inner>.list-item>view{ margin: 10rpx auto; width: 200rpx; font-size: 10pt; text-align: center; } 5.编写底部播放器页面结构 5.1页面结构： 五环之歌 岳云鹏 5.2页面样式： /* 底部播放器 */ .player{ display: flex; align-items: center; background: #222; border-top: 1px solid #2baa6a; height: 112rpx; } .player-cover{ width: 80rpx; height: 80rpx; margin-left: 15rpx; border-radius: 10rpx; border: 1px solid rgb(226, 196, 196); } .player-info{ flex: 1; font-size: 10pt; margin-left: 20rpx; line-height:40rpx ; } .player-info-singer{ color: #888; } .player-controls image{ width: 60rpx; height: 60rpx; margin-top:25rpx ; margin-right:25rpx ; }