微信小程序：荃荃的播放器

###音乐播放器
这是我在实训上写的第二个程序，是一个播放器小程序(体积比较大个人端无法预览)。还是app.json和文件被清空的问题，我不得不来这里把代码备个份！哭了！这个鬼问题必须解决！

pages/home/home.wxml

<!--pages/home/home.wxml-->
<!--indicator-dots="true表示是否要小圆点
 circular="true"表示滑动
 autoplay="true"表示自动轮播-->
<swiper indicator-dots="true" circular="true" autoplay="true">
    <swiper-item>
      <image src="../../images/home/banner07.jpg"></image>
    </swiper-item>

    <swiper-item>
      <image src="../../images/home/banner03.jpg"></image>  
    </swiper-item>

        <swiper-item>
      <image src="../../images/home/banner04.jpg"></image>  
    </swiper-item>

    <swiper-item>
      <image src="../../images/home/banner05.jpg"></image>  
    </swiper-item>

    <swiper-item>
      <image src="../../images/home/banner06.jpg"></image>  
    </swiper-item>

</swiper>

<view class="wrap topTab">
  <view>
  <image src="../../images/List.png"></image>
  <text0>List</text0>
  </view>

  <view>
  <image src="../../images/Recommend.png"></image>
  <text1>Recommend</text1>
  </view>

 <view>
  <image src="../../images/Singer.png"></image>
  <text2>Singer</text2>
  </view>

 <view>
  <image src="../../images/Favourite.png"></image>
  <text3>Favorite</text3>
  </view>
</view>

<view class="hot">
   <view class="titleWrap">
    <text>Hot</text>
    <text>More</text>
  </view>

 <view class="hot_cont">
  <movable-area>
   <movable-view direction="horizontal"> 
   <navigator url="../index/index?mn=告白气球&ma=Jay Chou&mu=http://www.ytmp3.cn/down/52104.mp3%22&mp=../../images/home/img05.jpg" ></navigator>
    <view>
      <image src="../../images/home/jacquees.jpg"></image>
      <view class="songTitle">
        <text>Bounce</text>
      </view>
      <view class="songSinger">Jacquees</view>
    </view>
    <view>
      <image src="../../images/home/balloon.jpg"></image>
      <view class="songTitle">
        <text>告白气球</text>
      </view>
      <view class="songSinger">Jay Chou</view>
    </view>
    <view>
      <image src="../../images/home/balloon.jpg"></image>
      <view class="songTitle">告白气球</view>
      <view class="songSinger">Jay Chou</view>
    </view>
   </movable-view>
  </movable-area>
 </view>
</view>

<view class="centerblank"></view>

pages/home/home.wss

/* pages/home/home.wxss */
/*页面*/
page{
   
  color: palevioletred;
  background-color: whitesmoke;
}

/*轮播*/
swiper{
   
  height: 400rpx;
}
swiper image{
   
  width: 100%;
  height: 100%;
}

.wrap{
   
  background-color: rgb(247, 241, 231);
  box-shadow: 1px 2px 3px gray;
}
.topTab{
   
  height: 200rpx;
  /*弹性盒子*/
  display: flex;
  justify-content: space-around;
  /*等比排列*/
  align-items: center;
}
.topTab view{
   
  width: 22%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin-left: 45rpx;
}
.topTab view image{
   
  width: 100rpx;
  height: 100rpx;
}
.topTab view text0{
   
  font-size: 28rpx;
  margin-left: 20rpx;
  
}
.topTab view text1{
   
  font-size: 28rpx;
  margin-left: -30rpx;
}
.topTab view text2{
   
  font-size: 28rpx;
  margin-left: 8rpx;
}
.topTab view text3{
   
  font-size: 28rpx;
  margin-left: -2rpx;
}

.titleWrap{
   
height: 44rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 40rpx;
}

.hot_cont{
   
  height: 560rpx;
}

.hot_cont image{
   
  width: 500rpx;