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

音乐小程序播放页自适应布局，tab栏切换

index.wxml

<image class="bg-img" mode="aspectFill" src="{
   
   {currentSong.al.picUrl}}"></image>
<view class="bg-cover"></view>
<view class="">
  <nav-bar>
    <view class="tab" slot="title">
      <view style="color:{
   
   {currentIndex === 0?'white':''}}">歌曲</view>
      <view class="divider">|</view>
      <view style="color:{
   
   {currentIndex === 1?'white':''}}" bindtap="handleLyric">歌词</view>
    </view>
  </nav-bar>
  <swiper class="swiper" style="height:{
   
   {countHeight}}px" bindchange="handleSwiperChange">
    <swiper-item class="music">
      <view class="album">
        <image class="img"  src="{
   
   {currentSong.al.picUrl}}"></image>
      </view>
      <view class="info">
        <view class="title">{
   
   {currentSong.name}}</view>
        <view class="subtitle">
          <view class="singer">
            <block wx:for="{
   
   {currentSong.ar}}" wx:key="id">  
              <text v-if="{
   
   {currentSong.length !== index+1}}">{
   
   {item.name}} /</text>
              <text v-if="{
   
   {currentSong.length === index+1}}">{
   
   {item.name}}</text>
             </block>
          </view>
          <view class="alias" wx:if="{
   
   {currentSong.alia.length}}">专辑：{
   
   {currentSong.alia[0]}}</view>
        </view>
      </view>
      <view class="music-lyric">我是歌词，呵呵哈哈哈</view>
      <view class="progress">
        <slider class="slider" block-size="{
   
   {16}}"></slider>
        <view class="time">
          <view class="current">2:99</view>
          <view class="duration">{
   
   {duration}}</view>
        </view>
      </view>
      <view class="option">
        <image class="btn btn-mode" src="/assets/images/player/play_order.png">  </image>
        <image class="btn btn-prev" src="/assets/images/player/play_prev.png">  </image>
        <image class="btn btn-pause" src="/assets/images/player/play_pause.png">  </image>
        <image class="btn btn-next" src="/assets/images/player/play_next.png">  </image>
        <image class="btn btn-music" src="/assets/images/player/play_music.png">  </image>
      </view>
    </swiper-item>
    <swiper-item class="lyric">2</swiper-item>
  </swiper>
</view>

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