前言
使用swiper组件完成三个标签页的切换，并且实现轮播图。scroll-view组件完成滚动视图，使用微信小程序提供的音乐API播放音频。
主页
主页
index.wxml
<view class="nav">
<view class="nav-item {
{currentTab==0?'active':''}}" bindtap="switchTab" data-tab="0">音乐推荐</view>
<view class="nav-item {
{currentTab==1?'active':''}}" bindtap="switchTab" data-tab="1">播放器</view>
<view class="nav-item {
{currentTab==2?'active':''}}" bindtap="switchTab" data-tab="2">播放列表</view>
</view>
<!-- 标签页 -->
<view class="main">
<swiper current="{
{currentTab}}" bindchange="changeTab">
<swiper-item class="nav-item">
<include src="recommend.wxml" />
</swiper-item>
<swiper-item class="nav-item">
<include src="play.wxml" />
</swiper-item>
<swiper-item class="nav-item">
<include src="playlist.wxml" />
</swiper-item>
</swiper>
</view>
<!-- 底部播放器 -->
<view class="playing">
<view class="thumb">
<image src="{
{play.coverImgUrl}}"></image>
</view>
<view class="info">
<view class="title">{
{play.title}}</view>
<view class="authors">{
{play.singer}}</view>
</view>
<view class="controls">
<image src="/images/01.png" bindtap="changePage" data-page="2" />
<image wx:if="{
{state=='paused'}}" src="/images/02.png" bindtap="play" />
<image wx:else src="/images/02stop.png" bindtap="pause" />
<image src="/images/03.png" bindtap="next" />
</view>
</view>
index.wxss
@import "recommend.wxss";
@import "play.wxss";
@import "playlist.wxss";
page{
background-color: #17181a;
color: #ccc;
font-size: 35rpx;
display: flex;
flex-direction: column;
height: 100%;
}
/* 导航栏 */
.nav{
height: 80rpx;
line-height: 80rpx;
display: flex;
}
.nav-item{
flex: 1;
flex-basis:33.3%;
text-align: center;
}
.active{
color: orange;
}
/* 主体 */
.main{
flex: 1;
height: 100%;
}
.main>swiper{
height: 100%;
}
/* 底部 */
.playing{
height: 120rpx;
display: flex;
}
.thumb{
width: 120rpx;
}
.thumb>image{
width: 110rpx;
height: 110rpx;
margin: 5rpx;
}
.info{
flex: 1;
}
.info>view{
height: 60rpx;
line-height: 60rpx;
}
.controls{
width: 250rpx;
}
.controls>image{
width: 80rpx;
height: 80rpx;
margin-top: 20rpx;
}
三个标签页
推荐页
recommend.wxml
<!-- 内容滚动区域 -->
<scroll-view class="content-info" scroll-y>
<!-- 轮播图 -->
<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
<swiper-item>
<image src="/images/1.jpg" />
</swiper-item>
<swiper-item>
<image src="/images/2.jpg" />
</swiper-item>
<swiper-item>
<image src="/images/4.jpg" />
</swiper-item>
</swiper>
<!-- 功能按钮 -->
<view class="content-info-portal">
<view>
<image src="/images/04.png" />
<text>私人FM</text>
</view>
<view>
<image src="/images/05.png" />
<text>每日歌曲推荐</text>
</view>
<view>
<image src="/images/06.png" />
<text>云音乐新歌榜</text>
</view>
</view>
<!-- 热门音乐 -->
<view class="content-info-list">
<view class="list-title">推荐歌曲</view>
<view class="list-inner">
<view class="list-item">
<image src="/images/cover.jpg" />
<view>紫罗兰</view>
</view>
<view class="list-item">
<image src="/images/cover.jpg" />
<view>五月之歌</view>
</view>
<view class="list-item">
<image src="/images/cover.jpg" />
<view>菩提树</view>
</view>
<view class="list-item">
<image src="/images/cover.jpg" />
<view>欢乐颂</view>
</view>
<view class="list-item">
<image src="/images/cover.jpg" />
<view>安魂曲</view>
</view>
<view class="list-item">
<image src="/images/cover.jpg" />
<view>摇篮曲</view>
</view>
</view>
</view>
</scroll-view>
index.wxss
.content-info {
height: 100%;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
/* 轮播图 */
.content-info-slide {
height: 302rpx;
margin-bottom: 20px;
}
.content-info-slide image {
width: 100%;
height: 100%;
}
/* 功能按钮 */
.content-info-portal {
display: flex;
margin-bottom: 15px;
}
.content-info-portal > view {
flex: 1;
font-size: 11pt;
text-align: center;
}
.content-info-portal image {
width: 120rpx;
height: 120rpx;
display: block;
margin: 20rpx auto;
}
/* 热门音乐 */
.content-info-list {
font-size: 11pt;
margin-bottom: 20rpx;
}
.content-info-list > .list-title {
margin: 20rpx 35rpx;
}
.content-info-list > .list-inner {
display: flex;
flex-wrap: wrap;
margin: 0 20rpx;
}
.content-info-list > .list-inner > .list-item {
flex: 1;
}
.content-info-list > .list-inner > .list-item > image {
display: block;
width: 200rpx;
height: 200rpx;
margin: 0 auto;
border-radius: 10rpx;
border: 1rpx solid #555;
}
.content-info-list > .list-inner > .list-item > view {
width: 200rpx;
margin: 10rpx auto;
font-size: 10pt;
}
播放器页
play.wxml
<view class="play">
<!-- 基本信息 -->
<view class="music_info">
<view class="name">{
{play.title}}</view>
<view class="auto">{
{play.singer}}</view>
</view>
<!-- 封面 -->
<view class="cover">
<image src="{
{play.coverImgUrl}}" style="animation-play-state:{
{
state}}" />
</view>
<!-- 进度条 -->
<view class="progress">
<!-- 显示播放进度和时间 -->
<text>{
{play.currentTime}}</text>
<slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada"
value="{
{play.percent}}" />
<text>{
{play.duration}}</text>
</view>
</view>
play.wxss
.play {
display: flex;
flex-direction: column;
}
/* */
.music_info {
text-align: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
/* */
.cover {
margin-top: 80rpx;
margin-bottom: 120rpx;
flex: 1;
}
.cover>image {
width: 400rpx;
height: 400rpx;
display: block;
margin: 0 auto;
border-radius: 50%;
/* 动画旋转 */
animation: rotateImage 10s linear infinite;
}
@keyframes rotateImage {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.progress{
padding-bottom: 50rpx;
display: flex;
}
.progress>slider{
display: inline-block;
/* width: 400rpx; */
flex: 1;
}
.progress>text{
padding: 16rpx;
height: 50rpx;
line-height: 50rpx;
}
播放列表页
playist.wsml
<scroll-view class="playlist" scroll-y>
<view class="playlist-item" wx:for="{
{musics}}" 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>
playist.wsss
.playlist-item {
display: flex;
align-items: left;
border-bottom: 1rpx solid #333;
height: 140rpx;
}
.playlist-cover {
width: 100rpx;
height: 100rpx;
margin: 12rpx;
margin-left: 20rpx;
border-radius: 8rpx;
border: 1px solid #333;
}
.playlist-info {
flex: 1;
font-size: 12pt;
line-height: 50rpx;
margin-left: 10rpx;
text-align: left;
padding-bottom: 8rpx;
margin-top: 12rpx;
}
.playlist-info-singer {
color: #888;
}
.playlist-controls {
font-size: 12pt;
margin-right: 30rpx;
color: #c25b5b;
}
逻辑
index.js
Page({
/**
* 页面的初始数据
*/
data: {
currrentTab: 1,
musics: [{
id: 1,
title: '智联世界',
singer: '小冰',
src: '/audio/智联家园.mp3',
coverImgUrl: '/images/小冰.jpg'
}, {
id: 2,
title: '不要认输',
singer: '坂井泉水',
src: '/audio/不要认输.mp3',
coverImgUrl: '/images/坂井泉水.jpg'
}, {
id: 3,
title: '白桦林',
singer: '朴树',
src: '/audio/白桦林.mp3',
coverImgUrl: '/images/朴树.jpg'
}, {
id: 4,
title: '红豆',
singer: '王菲',
src: '/audio/红豆.mp3',
coverImgUrl: '/images/王菲.jpg'
}],
state: 'paused',
playIndex: 0,
play: {
currentTime: '00:00',
duration: '00:00',
percent: 0,
title: '',
singer: '',
coverImgUrl: '/images/cover.jpg',
}
},
// 单击导航栏拿到自定义属性
switchTab: function (e) {
// var tab = e.target.dataset.tab
// this.setData({
// currrentTab:tab
// })
this.setData({
currentTab: e.target.dataset.tab,
})
},
changeTab: function (e) {
// var tab = e.target.dataset.tab
// this.setData({
// currrentTab:tab
// })
this.setData({
currentTab: e.detail.current
})
},
// 实现播放器播放功能
audioCtx: null,
onReady: function() {
this.audioCtx = wx.createInnerAudioContext()
// 默认选择第1曲
this.setMusic(0)
var that = this
// 播放进度检测
this.audioCtx.onError(function() {
console.log('播放失败：' + that.audioCtx.src)
})
// 播放完成自动换下一曲
this.audioCtx.onEnded(function() {
that.next()
})
// 自动更新播放进度
this.audioCtx.onPlay(function() {
})
this.audioCtx.onTimeUpdate(function() {
that.setData({
'play.duration': formatTime(that.audioCtx.duration),
'play.currentTime': formatTime(that.audioCtx.currentTime),
'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
})
})
// 格式化时间
function formatTime(time) {
var minute = Math.floor(time / 60) % 60;
var second = Math.floor(time) % 60
return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
}
},
// 音乐播放
setMusic: function(index) {
var music = this.data.musics[index]
this.audioCtx.src = music.src
this.setData({
playIndex: index,
'play.title': music.title,
'play.singer': music.singer,
'play.coverImgUrl': music.coverImgUrl,
'play.currentTime': '00:00',
'play.duration': '00:00',
'play.percent': 0
})
},
// 播放按钮
play: function() {
this.audioCtx.play()
this.setData({
state: 'running'
})
},
// 暂停按钮
pause: function() {
this.audioCtx.pause()
this.setData({
state: 'paused'
})
},
// 下一曲按钮
next: function() {
var index = this.data.playIndex >= this.data.musics.length - 1 ? 0 : this.data.playIndex + 1
this.setMusic(index)
if (this.data.state === 'running') {
this.play()
}
},
// 滚动条调节歌曲进度
sliderChange: function(e) {
var second = e.detail.value * this.audioCtx.duration / 100
this.audioCtx.seek(second)
},
// 播放列表换曲功能
change: function(e) {
this.setMusic(e.currentTarget.dataset.index)
this.play()
}