微信小程序-实现音乐播放页（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