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

`<!--pages/list/list.wxml-->
<view class=container>
    <image class=headimg src=/images/linbao2.jpg></image>
    <text class=listname>Sylvias 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%;
}

`