实现音乐微信小程序

最新推荐文章于 2024-07-25 12:55:56 发布

小扒菜同学

最新推荐文章于 2024-07-25 12:55:56 发布

阅读量382

点赞数

文章标签：微信小程序微信小程序

本文链接：https://blog.csdn.net/qq_45871821/article/details/121209277

版权

@TOC实现音乐微信小程序

[微信小程序音乐链接](https://download.csdn.net/download/qq_45871821/38513105)

图片

在这里插入图片描述

音乐播放器主页代码

// An highlighted block
<!--pages/music/index.wxml-->
<!-- <swiper current-item-id="c">
 <swiper-item item-id="a" style="background-color: antiquewhite;">0</swiper-item>
 <swiper-item item-id="b" style="background-color: rgb(89, 219, 152);">1</swiper-item>
 <swiper-item item-id="c" style="background-color: rgb(100, 64, 231);">2</swiper-item>
</swiper> -->
<!-- <include src="header.wxml"></include>
<view>body</view>
<include src="footer.wxml"></include> -->
<!-- 标签页标题 -->
<view class="tab">
<view class="tab-item{{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
<view class="tab-item{{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
<view class="tab-item{{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content">
<swiper current="{{item}}" bindchange="changeTab">
 <swiper-item>
    <include src="./info.wxml"/>
 </swiper-item>
 <swiper-item>
    <include src="./play.wxml"/>
 </swiper-item>
 <swiper-item>
    <include src="./palylist.wxml"/>
 </swiper-item>
</swiper>
</view>
<!-- 底部播放器  3个部分-->
<view class="player">
<image class="player-cover" src="{{play.coverImgUrl}}" />
<view class="player-info">
<view class="play-info-title">{{play.title}}</view>
<view class="play-info-title">{{play.singer}}</view>
</view>
<view class="player-controls">
<!-- 切换到播放列表 -->
<image src="./images/bu_1.jpg" bindtap="changePage" data-page="2"/>
<!-- 播放 -->
<image wx:if="{{state=='paused'}}"  src="./images/bu_2.jpg" bindtap="play" />
<image wx:else src="./images/bu_2.jpg" bindtap="pause" />
<image src="./images/bu_3.jpg" bindtap="next" />
</view>
</view>
## 音乐播放器主页代码