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

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

  	`<!--pages/list/list.wxml-->
<view class='container'>
    <image class='headimg' src='/images/linbao2.jpg'></image>
    <text class='listname'>Sylvia's List</text>
    <text class='username'>秋.*</text>
    <image class='userimg' src='/images/linbao1.jpg'></image>
    <view class="navbar">  
  <text wx:for="{{navbar}}" data-idx="{{index}}" 
class="item {{currentTab==index ? 'active' : ''}}" 
wx:key="unique" bindtap="navbarTap">{{item}}</text>  
</view>
 </view>
<import src="/wxSearch/wxSearch.wxml"/>
<!--search start-->
<view class="wxSearch-section">
   <view class="wxSearch-pancel">
      <input bindinput="wxSearchInput" bindfocus="wxSerchFocus" 
value="{{wxSearchData.value}}" bindblur="wxSearchBlur" 
 class="wxSearch-input" placeholder='搜索此歌单的歌曲'/>
      <view class="placeholder">
        <icon class="weui-icon-search_in-box" type="search" 
size="14"></icon> 
      </view>  
   </view>
</view>
<scroll-view scroll-y="true">
<view class="section">
    <button form-type="submit" plain="{{plain}}" ><text class='songname'>王菲-红豆</text></button>
    <button form-type="submit" plain="{{plain}}"><text class='songname'>王菲-你在终点等我</text></button>
    <button form-type="submit" plain="{{plain}}"><text class='songname'>王菲-但愿人长久</text></button>
    <button form-type="submit" plain="{{plain}}"><text class='songname'>王菲-清平调</text></button>
    <button form-type="submit" plain="{{plain}}"><text class='songname'>王菲-传奇</text></button>
    <button form-type="submit" plain="{{plain}}"><text class='songname'>王菲-因为爱情</text></button>
    <button form-type="submit" plain="{{plain}}"><text class='songname'>王菲-笑忘书</text></button>
</view>    
</scroll-view>
<!--引入模板，注意 is="wxSearch" 和模板template name名称相对应-->
<template is="wxSearch" data="{{wxSearchData}}"/>`



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

`