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

2021年8月18日 (三) 08:36的版本

任务分析

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

编写页面结构和样式

WXML

index.wxml:

<!-- 内容区域 -->
<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>

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