“"音乐"小程序：播放列表”的版本间的差异

2021年11月24日 (三) 08:16的版本

任务分析

播放列表是一个列表，通过列表渲染自动生成

编写页面结构和样式

WXML

<view class="playlist-item" wx:for="模板:Playlist" wx:key="id" bindtap="change" data-index="模板:Index">
                     <image class="playlist-cover" src="模板:Item.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>

WXSS

除了复制播放器页面的CSS外，再增添以下样式：

 
/* 播放列表 */

.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;
}

JS

复制播放器页面的JS即可。

效果

实现换曲功能

index.js:

      // 播放列表换曲功能
  change: function(e) {
    this.setMusic(e.currentTarget.dataset.index)
    this.play()
  },

保存上述代码后，运行程序，测试换曲功能是否正确执行。