音乐小程序播放页自适应布局，tab栏切换
index.wxml
歌曲
|
歌词
{{currentSong.name}}
{{item.name}} /
{{item.name}}
专辑：{{currentSong.alia[0]}}
我是歌词，呵呵哈哈哈
2:99
{{duration}}
2 index.wxss
/* pages/music-player/index.wxss */
page{
width: 100%;
}
.bg-img ,.bg-cover{
position: fixed;
z-index: -1;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.bg-cover{
background-color: rgba(0,0,0,.5);
backdrop-filter: blur(10px);
}
.tab{
display: flex;
font-size: 28rpx;
justify-content: center;
color: rgb(209, 202, 202);
}
.divider{
margin: 0 20rpx;
}
.music{
display: flex;
flex-direction: column;
box-sizing: border-box;
padding:0 40rpx;
}
.album{
flex: 7;
}
.album .img{
width: 100%;
height: 100%;
border-radius: 20rpx;
}
.info{
color: #fff;
}
.info .title{
margin: 20rpx 0;
font-size: 36rpx;
}
.info .subtitle{
font-size: 28rpx;
color: #ccc;
line-height: 50rpx;
}
.music-lyric{
margin-top: 40rpx;
color: #fff;
font-size: 32rpx;
text-align: center;
}
.time{
display: flex;
justify-content: space-between;
color: #fff;
font-size: 28rpx;
margin:0 30rpx;
}
.slider{
margin: 10rpx;
}
.option{
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
padding-bottom: 20rpx;
}
.btn-mode,.btn-music{
width: 70rpx;
height: 70rpx;
}
.btn-prev,.btn-next{
width: 70rpx;
height: 70rpx;
}
.btn-pause{
width: 140rpx;
height: 140rpx;
}
文章图片
【微信小程序|微信小程序-实现音乐播放页（flex）】 完整项目请移步gitee：https://gitee.com/yue_yue_wang/wymusic
推荐阅读
- 知识竞赛答题小程序的管理后台搭建教程
- 微信小程序|【微信小程序】微信小程序基础知识篇
- 微信小程序|微慕插件二开wordpress微信小程序源码下载 星尘UI v1.3.1
- 微信小程序环境共享，多个小程序共享一个云开发数据库
- 小程序源码|猜歌小游戏多功能组合微信小程序源码下载
- 小程序|计算机毕业设计springboot微信小程序购物商城源码
- 小程序|纯头像微信小程序源码下载,多分类头像自动采集
- 小程序源码|微信智慧外链接致富版微信小程序源码下载，支持多端转换，致力打造(微信)小程序营销推广生态的基础必需
- 小程序源码|教育培训学校源码微信小程序源码下载，带课件/习题/活动插件，支持小程序与公众号双版本