查看“"音乐"小程序:播放列表”的源代码
←
"音乐"小程序:播放列表
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==任务分析== 播放列表是一个列表,通过列表渲染自动生成 ==编写页面结构和样式== ===WXML=== index.wxml: <nowiki> <!-- 内容区域 --> <view class="content"> <swiper current="{{item}}" bindchange="changeTab"> <swiper-item> <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="{{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> </scroll-view> </swiper-item> </swiper> </view> </nowiki> ===WXSS=== 除了复制播放器页面的CSS外,再增添以下样式: <nowiki> /* 播放列表 */ .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; } </nowiki> ===JS=== 复制播放器页面的JS即可。 ===效果=== [[文件:wexin21081801.png]] ==实现换曲功能== index.js: <nowiki> // 播放列表换曲功能 change: function(e) { this.setMusic(e.currentTarget.dataset.index) this.play() },</nowiki>
返回至
"音乐"小程序:播放列表
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息