parent
557c06b536
commit
a79b0d33d2
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 49 KiB |
@ -0,0 +1,188 @@
|
|||||||
|
Page({
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面的初始数据
|
||||||
|
*/
|
||||||
|
data: {
|
||||||
|
item:0,
|
||||||
|
tab:0,
|
||||||
|
// 播放器列表数据
|
||||||
|
playlist:[{
|
||||||
|
id:1,
|
||||||
|
title:"晴天",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/1.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
},{
|
||||||
|
id:2,
|
||||||
|
title:"反方向的钟",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/2.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
},{
|
||||||
|
id:3,
|
||||||
|
title:"兰亭序",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/3.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
},{
|
||||||
|
id:4,
|
||||||
|
title:"青花瓷",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/4.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
},{
|
||||||
|
id:5,
|
||||||
|
title:"本草纲目",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/4.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
},{
|
||||||
|
id:6,
|
||||||
|
title:"爱在西元前",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/4.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
},{
|
||||||
|
id:7,
|
||||||
|
title:"花海",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/4.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
},{
|
||||||
|
id:8,
|
||||||
|
title:"半岛铁盒",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/4.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
},{
|
||||||
|
id:9,
|
||||||
|
title:"轨迹",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/4.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
},{
|
||||||
|
id:10,
|
||||||
|
title:"搁浅",
|
||||||
|
singer:'周杰伦',
|
||||||
|
src:'http://localhost:3000/4.mp3',
|
||||||
|
converImgUrl:'../images/yhm.png'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
state:'paused',
|
||||||
|
playIndex:0,
|
||||||
|
play:{
|
||||||
|
currentTime:'00:00',
|
||||||
|
duration:'00:00',
|
||||||
|
percent:0,
|
||||||
|
title:'',
|
||||||
|
singer:'',
|
||||||
|
// converImgUrl:'../images/cover.jpg'
|
||||||
|
coverImgUrl:'../images/yhm.png'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
audioCtx:null,
|
||||||
|
|
||||||
|
changeItem(e){
|
||||||
|
this.setData({
|
||||||
|
item : e.target.dataset.item
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changeTab(e){
|
||||||
|
this.setData({
|
||||||
|
tab:e.detail.current
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面加载
|
||||||
|
*/
|
||||||
|
onLoad: function (options) {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面初次渲染完成
|
||||||
|
*/
|
||||||
|
onReady: function () {
|
||||||
|
this.audioCtx = wx.createInnerAudioContext();
|
||||||
|
this.setMusic(0);
|
||||||
|
},
|
||||||
|
setMusic(index){
|
||||||
|
var music = this .data.playlist[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.playlist.length - 1 ? 0 : this.data.playIndex + 1
|
||||||
|
this. setMusic(index)
|
||||||
|
if (this .data.state == 'running') {
|
||||||
|
this.play()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面显示
|
||||||
|
*/
|
||||||
|
onShow: function () {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面隐藏
|
||||||
|
*/
|
||||||
|
onHide: function () {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面卸载
|
||||||
|
*/
|
||||||
|
onUnload: function () {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面相关事件处理函数--监听用户下拉动作
|
||||||
|
*/
|
||||||
|
onPullDownRefresh: function () {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
|
*/
|
||||||
|
onReachBottom: function () {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户点击右上角分享
|
||||||
|
*/
|
||||||
|
onShareAppMessage: function () {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"navigationBarBackgroundColor": "#fff",
|
||||||
|
"navigationBarTitleText": "音乐",
|
||||||
|
"navigationBarTextStyle": "black"
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<!--pages/index/index.wxml-->
|
||||||
|
<!-- 顶部 -->
|
||||||
|
<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="playlist.wxml"/>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<!-- 底部播放器 -->
|
||||||
|
<view class="player">
|
||||||
|
<image class="player-cover" src="{{play.coverImgUrl}}" />
|
||||||
|
<view class="player-info">
|
||||||
|
<view class="player-info-title">{{play.title}}</view>
|
||||||
|
<view class="player-info-singer">{{play.singer}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="player-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>
|
||||||
|
|
||||||
@ -0,0 +1,204 @@
|
|||||||
|
page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #17181a;
|
||||||
|
color: #ccc;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.tab{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.tab-item{
|
||||||
|
flex:1;
|
||||||
|
font-size: 10pt;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 72rpx;
|
||||||
|
border-bottom: 6rpx solid #eee;
|
||||||
|
}
|
||||||
|
.tab-item.active{
|
||||||
|
color: #c25b5b;
|
||||||
|
border-bottom-color: #c25b5b;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.content > swiper{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.player{
|
||||||
|
background: #222;
|
||||||
|
border-top:1px solid #252525;
|
||||||
|
height: 112rpx;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
/*播放器*/
|
||||||
|
.content-play {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center ;
|
||||||
|
}
|
||||||
|
.content-play-info > view{
|
||||||
|
color: #888;
|
||||||
|
font-size: 11pt;
|
||||||
|
}
|
||||||
|
/*操放进度和时间*/
|
||||||
|
.content-play-progress{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin:0 35rpx;
|
||||||
|
font-size: 9pt;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.content-play-progress > view {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
/*显示专辑页面样式*/
|
||||||
|
.content-play-cover image {
|
||||||
|
animation: rotateImage 10s linear infinite;
|
||||||
|
width: 400rpx;
|
||||||
|
height: 400rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #333 ;
|
||||||
|
}
|
||||||
|
@keyframes rotateImage {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to{
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 播放进度和时间 */
|
||||||
|
.content-play-progress{
|
||||||
|
display: flex;
|
||||||
|
align-items: flex;
|
||||||
|
margin: 0 35rpx;
|
||||||
|
font-size: 9pt;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.content-play-progress > view {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部播放器 */
|
||||||
|
.player {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #222;
|
||||||
|
border-top: 1px solid #252525 ;
|
||||||
|
height: 112rpx;
|
||||||
|
}
|
||||||
|
.player-cover {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: 1px solid #333 ;
|
||||||
|
}
|
||||||
|
.player-info {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 38rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
padding-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.player-info-singer {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.player-controls image {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
.content-playlist{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/* 播放列表 */
|
||||||
|
.playlist-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1rpx solid #333 ;
|
||||||
|
height: 112rpx;
|
||||||
|
}
|
||||||
|
.playlist-cover {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
margin-left:15rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: 1px solid#333 ;
|
||||||
|
}
|
||||||
|
.playlist-info {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 38rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
padding-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.playlist-info-singer {
|
||||||
|
color:#888;
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<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/banner.jpg"/>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<image src="../images/banner.jpg"/>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<image src="../images/banner.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/mjz.png"/>
|
||||||
|
<view>稻香</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="../images/qlx.png"/>
|
||||||
|
<view>七里香</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="../images/syydxb.png"/>
|
||||||
|
<view>夜曲</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="../images/mjz.png"/>
|
||||||
|
<view>花海</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="../images/ylxb.png"/>
|
||||||
|
<view>一路向北</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item">
|
||||||
|
<image src="../images/yhm.png"/>
|
||||||
|
<view>以父之名</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"appid": "wx43b4be9b6b720b57",
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "2.31.1",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": [],
|
||||||
|
"include": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"coverView": true,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"minified": true,
|
||||||
|
"enhance": true,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
},
|
||||||
|
"condition": false
|
||||||
|
},
|
||||||
|
"condition": {},
|
||||||
|
"editorSetting": {
|
||||||
|
"tabIndent": "insertSpaces",
|
||||||
|
"tabSize": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue