微信小程序2：网易云音乐（完整版）

作为一个需要听歌“续命”的程序员小白，周末睡个懒觉也备忘录敲代码呀，记录下前阵子写的“小雅米音乐”----网易云音乐小程序，希望大家会喜欢，也请各位大佬多多指教。

代码送上：

1、index.wxml

<view class="tab">

<view class="tab-item {{tab==0?'active':''}}" data-item='0' bindtap="changeNum">音乐推荐</view>

<view class="tab-item {{tab==1?'active':''}}" data-item='1' bindtap="changeNum">播放器</view>

<view class="tab-item {{tab==2?'active':''}}" data-item='2' bindtap="changeNum">列表播放</view>

</view>



<view class="content">

<swiper current="{{num}}" bindchange='changeTab'>

<swiper-item><include src ='./info.wxml'/></swiper-item>

<swiper-item><include src ='./play.wxml'/></swiper-item>

<swiper-item><include src ='./playlist.wxml'/></swiper-item>

</swiper>

</view>



<view class="player">

<image src="{{play.coverImgUrl}}" class="player-image"></image>

<view class="player-info">

<view class="gequ">{{play.title}}</view>

<view class="singer">{{play.singer}}</view>

</view>

<view class="controls">

<image src="/images/01.png" bindtap='changePage' data-page="2"></image>



<image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap='play'></image>

<image wx:else src='/images/02stop.png' bindtap='pause' ></image>

<image src="/images/03.png" bindtap='next'></image>

</view>

</view>

2、info.wxml

<scroll-view class='scroll' scroll-y>



<swiper class='info-swiper' indicator-dots autoplay>

<swiper-item><image src='../../images/y1.jpg' /></swiper-item>

<swiper-item><image src='../../images/y2.jpg' /></swiper-item>

<swiper-item><image src='../../images/y3.jpg' /></swiper-item>

</swiper>



<view class='info-content'>

<view>

<image src='../../images/04.png'></image>

<text>私人FM</text>

</view>

<view>

<image src='../../images/05.png'></image>

<text>每日推荐</text>

</view>

<view>

<image src='../../images/06.png'></image>

<text>云音乐新歌榜</text>

</view>

</view>

<view class="info-list">

<view class="title">推荐歌曲</view>

<view class="list">

<view wx:for="{{playlist}}" wx:key="id" wx:if="{{index>=4}}">

<image src='{{item.coverImgUrl}}'></image>

<text>{{item.title}}</text>

</view>

</view>

</view>

3、play.wxml

<view class="<content-play">

<view class="content-play-info">

<text>{{play.title}}</text>

<view>----{{play.singer}}----</view>

</view>

<view class="content-play-cover">

<image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}"></image>

</view>

<view class="content-play-progress">

<text>{{play.currentTime}}</text>

<view>

<slider activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" bindchange="sliderChange"/>

</view>

<text>{{play.duration}}</text>

</view>

</view>

4、playlist.wxml

<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}}"></image>

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