"音乐"小程序：播放列表

任务分析

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

静态版

WXML

<!--pages/list/index.wxml-->
<view class="playlist-item" >
                      <image class="playlist-cover" src="" />
                      <view class="playlist-info">
                        <view class="playlist-info-title">123</view>
                        <view class="playlist-info-singer">456</view>
                      </view>
                      <view class="playlist-controls">
                        <text >正在播放</text>
                      </view>
    </view>

WXSS

/* pages/list/index.wxss */
/* 播放列表 */

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

列表渲染版

定义基础数据

在index.js中的data对象定义基础数据playlist,主要包括音乐的信息和音乐播放路径

• playlist是歌曲列表，

• playIndex 是歌曲索引值，

• play对象记录了当前播放曲目的信息。

 data: {

    // 播放列表数据
    playlist: [{
      id: 1,
      title: '野花香',
      singer: '莫斯曼',
      src: 'https://www.ytmp3.cn/down/75810.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 2,
      title: '梦中的额吉',
      singer: '广场舞',
      src: 'https://www.ytmp3.cn/down/73552.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 3,
      title: '别哭了宝贝',
      singer: '皓天',
      src: 'https://www.ytmp3.cn/down/73421.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 4,
      title: '桃花多多开',
      singer: '阿牛',
      src: 'https://www.ytmp3.cn/down/73418.mp3',
      coverImgUrl: '/images/cover.jpg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },

编写页面结构和样式

WXML

index.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()
  },

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