音乐播放器微信小程序开发-歌单界面（简陋版）

仿QQ音乐app的歌单界面制作了一个简易且简陋的歌单界面。
首先po一张最终效果图（很多功能还没实现，以及还有bug没有改好）
因为不涉及到逻辑，目前只需一些网页开发经验与知识即可（当然啦，还需要一定的审美）
首先从上图可以看出界面大致分为两块，上边浅蓝色部分主要为歌单介绍。其中左一正方形大图是歌单封面，小圆圈图片是登录用的头像，用户旁边文字（秋.）为用户名，Sylvia’s List是用户自己定义的歌单名字。下边是一些常用功能诸如收藏、评论、分享。下边大块是对歌曲名字的排版。（暂不支持播放）主要是对wxml、wxss的编写，就可以完成一个良好的界面了。
依上描述，我在wxml里主要分两大view块，第一块是现对用户信息的描述，第二部分是歌单名字的排布。在第二view块里我还运用了滑块功能，将每一首歌曲都设置为一个按钮，当点击时，后台可以接收到此行为，然后进行播放。目前功能不齐全，尚在更新中。
`


Sylvia’s List
秋.


{{item}}

王菲-红豆 王菲-你在终点等我 王菲-但愿人长久 王菲-清平调 王菲-传奇 王菲-因为爱情 王菲-笑忘书 `

wxss代码如下：
`@import “/wxSearch/wxSearch.wxss”;
page{
display: flex;
flex-direction: column;
height: 100%;
}
button::after {
border: none;
}
.songname{
font-size: 36rpx;
}
.container{
background-color: #d9e5e3;
height: 340rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.navbar{
flex: none;
display: flex;

}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
color: white;
font-size:14px;
left: 0;
right: 0;
top: 140rpx;
}
/* 顶部导航字体颜色 /
.navbar .item.active{
color: #bcbace;
}
/ 顶部指示条属性 */
.navbar .item.active:after{
content: “”;
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5rpx;
background: #bcbace;
width: 70%;
margin: 0px auto;
}

.listname{
position: absolute;
left: 335rpx;
top: 40rpx;
color: #000000;
}
.username{
position: absolute;
left: 425rpx;
top: 160rpx;
font-size: 30rpx;
}
.headimg{
position: absolute;
left: 30rpx;
top: 15px;
width: 250rpx;
height: 250rpx;
}
.userimg{
position: absolute;
left: 335rpx;
top: 130rpx;
width: 75rpx;
height: 75rpx;
border-radius: 50%;
}
`