本文实例为大家分享了微信小程序实现音乐播放页面的布局,供大家参考,具体内容如下
1.效果图如下,点击播放按钮后,光碟转动,播放按钮变为暂停按钮;播放中点击暂停,光碟复位,暂停按钮恢复为播放按钮。
本文仅提供样式布局,其他具体响应不作介绍
2.样式布局代码
wxml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
< view class = "page_music" > < view class = 'icon {{isPlay?"rotateAu":""}}' mode = "widthFix" > </ view > < view class = "tools" > < view class = "last" bindtap = "last" > </ view > < view class = '{{isPlay?"pause":"play"}}' bindtap = "play" > </ view > < view class = "next" bindtap = "next" > </ view > </ view > < view class = "volume" > < view class = "volumeIcon" > </ view > < view class = "sl" > < slider min = '0' max = '10' step = "1" value = "0" bindchange = "slide" /> </ view > </ view > </ view > |
wxss:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
.page_music{ position : absolute ; width : 100% ; height : 80% ; } . icon { position : relative ; width : 500 rpx; height : 500 rpx; top : 5% ; left : 125 rpx; background-image : url ( "" ); /*放入光碟图片*/ background- size : 100% 100% ; background-repeat : no-repeat ; background-position : center ; } .tools{ position : relative ; width : 80% ; height : 10% ; top : 10% ; left : 10% ; } .last{ width : 100 rpx; height : 100 rpx; position : absolute ; left : 0 ; top : 0 ; background-image : url ( "" ); /*放入上一首图标*/ background- size : 100% 100% ; background-repeat : no-repeat ; background-position : center ; } .play{ width : 100 rpx; height : 100 rpx; position : absolute ; left : 42% ; top : 0 ; background-image : url ( "" ); /*放入播放图标*/ background- size : 100% 100% ; background-repeat : no-repeat ; background-position : center ; } .pause{ width : 100 rpx; height : 100 rpx; position : absolute ; left : 42% ; top : 0 ; background-image : url ( "" ); /*放入暂停图标*/ background- size : 100% 100% ; background-repeat : no-repeat ; background-position : center ; } .next{ width : 100 rpx; height : 100 rpx; position : absolute ; right : 0 ; top : 0 ; background-image : url ( "" ); /*放入下一首图标*/ background- size : 100% 100% ; background-repeat : no-repeat ; background-position : center ; } .volume{ position : relative ; width : 80% ; height : 10% ; top : 20% ; left : 10% ; } .volumeIcon{ position : absolute ; left : 0 ; width : 80 rpx; height : 80 rpx; top : 0 ; background-image : url ( "" ); /*放入音量图标*/ background- size : 100% 100% ; background-repeat : no-repeat ; background-position : center ; } .sl{ position : absolute ; right : 0 ; width : 80% ; height : 100% ; top : 0 ; background-image : url ( "" ); /*放入滑动条背景图片*/ background- size : 100% 100% ; background-repeat : no-repeat ; background-position : center ; } .rotateAu{ animation: rotate 3 s linear infinite; } @keyframes rotate{ from{transform: rotate( 0 deg)} to{transform: rotate( 360 deg)} } |
js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
Page({ data:{ isPlay: false , }, play: function (e){ if ( this .data.isPlay== true ) { this .setData({ isPlay: false }) } else { this .setData({ isPlay: true }) } } }) |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/weixin_43900888/article/details/110945476