“"音乐"小程序:播放列表”的版本间的差异
来自CloudWiki
(→WXML) |
(→WXML) |
||
第5行: | 第5行: | ||
===WXML=== | ===WXML=== | ||
− | |||
− | |||
<!-- 内容区域 --> | <!-- 内容区域 --> | ||
第20行: | 第18行: | ||
</view> | </view> | ||
</view> | </view> | ||
− | |||
− | |||
===WXSS=== | ===WXSS=== |
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() },
保存上述代码后,运行程序,测试换曲功能是否正确执行。