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

任务分析

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

编写页面结构和样式

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>