微信小程序开发之——音乐播放器-播放列表(3.5)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • 播放列表显示所有音乐列表专辑信息
  • 点击音乐专辑中的音乐播放此音乐
  • 音乐播放时，右侧显示正在播放；同时底部播放器显示音乐信息

二 播放列表

2.1 布局页面(pages/index/playlist.wxml)

1
2
3
4
5
6
7
8
9
10
11
12
<scroll-view class="content-playlist" scroll-y>
  <view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}">
    <image class="playlist-cover" src="{{imte.coverImgUrl}}" />
    <view class="playlist-info">
      <view class="playlist-info-title">{{item.title}}</view>
      <view class="playlist-info-singer">{{item.singer}}</view>
    </view>
    <view class="playlist-controls">
      <text wx:if='{{index==playIndex}}'>正在播放</text>
    </view>
  </view>
</scroll-view>

2.2 样式文件(pages/index/index.wxss)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.playlist-item{
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #333;
  height: 112rpx;
}
.playlist-cover{
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}
.playlist-info{
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}
.playlist-info-singer{
  color: #888;
}
.playlist-controls{
  font-size: 10pt;
  margin-right: 20rpx;
  color: #c25b5b;
}

2.3 逻辑文件(pages/index/index.js)

1
2
3
4
change:function(e){
   this.setMusic(e.currentTarget.dataset.index)
   this.play()
}

2.4 效果图