“"音乐"小程序：播放列表”的版本间的差异
来自CloudWiki
（→实现换曲功能） |
（→WXML） |
||
| 第9行： | 第9行： | ||
<nowiki> | <nowiki> | ||
<!-- 内容区域 --> | <!-- 内容区域 --> | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
<view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}"> | <view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}"> | ||
<image class="playlist-cover" src="{{item.coverImgUrl}}" /> | <image class="playlist-cover" src="{{item.coverImgUrl}}" /> | ||
| 第23行： | 第20行： | ||
</view> | </view> | ||
</view> | </view> | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
</nowiki> | </nowiki> | ||
2021年11月24日 (三) 08:14的版本
任务分析
播放列表是一个列表，通过列表渲染自动生成
编写页面结构和样式
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()
},
保存上述代码后，运行程序，测试换曲功能是否正确执行。
