微信小程序-实现音乐播放页（flex）

音乐小程序播放页自适应布局，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;
}

 完整项目请移步gitee：https://gitee.com/yue_yue_wang/wymusic