介绍 & lt; view 类=皃age_music"比;
& lt;才能view 类=& # 39;icon {{isPlay ?“rotateAu":““}} & # 39;,模式=皐idthFix"比;
,,
& lt;才能/view>
& lt;才能view 类=皌ools"比;
,,,& lt; view 类=發ast", bindtap=發ast"比;
,,,& lt;/view>
,,,& lt; view 类=& # 39;{{isPlay ?“pause":“play"}} & # 39;, bindtap=皃lay"比;
,,,& lt;/view>
,,,& lt; view 类=皀ext", bindtap=皀ext"比;
,,,& lt;/view>
& lt;才能/view>
& lt;才能view 类=皏olume"比;
,,,& lt; view 类=皏olumeIcon"比;
,,,& lt;/view>
,,,& lt; view 类=皊l"比;
,,,& lt; slider min=& # 39; 0 & # 39;, max=& # 39; 10 & # 39;,一步=?“,https://www.yisu.com/zixun/value=" 0 " bindchange="张"/>
.page_music {
位置:才能,绝对;
,,宽度:100%;
,,身高:80%;
}
.icon {
位置:,才能相对;
,,宽度:500 rpx;
,,身高:500 rpx;
,,:5%;
,,左:125 rpx;
,,背景图片:url(“;”);,/*放入光碟图片*/,,background-size: 100%, 100%;
平铺方式才能:不再重演;
,,背景位置:中心;
}
.tools {
位置:,才能相对;
,,宽度:80%;
,,身高:10%;
,,:10%;
,,左:10%;
}
.last {
,,宽度:100 rpx;
,,身高:100 rpx;
位置:才能,绝对;
,,左:0;
,,:0;
,,背景图片:url(“;”);,/*放入上一首图标*/,,background-size: 100%, 100%;
平铺方式才能:不再重演;
,,背景位置:中心;
}
.play {
,,宽度:100 rpx;
,,身高:100 rpx;
位置:才能,绝对;
,,左:42%;
,,:0;
,,背景图片:url(“;”);,/*放入播放图标*/,,background-size: 100%, 100%;
平铺方式才能:不再重演;
,,背景位置:中心;
}
.pause {
,,宽度:100 rpx;
,,身高:100 rpx;
位置:才能,绝对;
,,左:42%;
,,:0;
,,背景图片:url(“;”);,/*放入暂停图标*/,,background-size: 100%, 100%;
平铺方式才能:不再重演;
,,背景位置:中心;
}
第二{
,,宽度:100 rpx;
,,身高:100 rpx;
位置:才能,绝对;
,,右:0;
,,:0;
,,背景图片:url(“;”);,/*放入下一首图标*/,,background-size: 100%, 100%;
平铺方式才能:不再重演;
,,背景位置:中心;
}
.volume {
位置:,才能相对;
,,宽度:80%;
,,身高:10%;
,,:20%;
,,左:10%;
}
.volumeIcon {
位置:才能,绝对;
,,左:0;
,,宽度:80 rpx;
,,身高:80 rpx;
,,:0;
,,背景图片:url(“;”);,/*放入音量图标*/,,background-size: 100%, 100%;
平铺方式才能:不再重演;
,,背景位置:中心;
}
. sl {
位置:才能,绝对;
,,右:0;
,,宽度:80%;
,,身高:100%;
,,:0;
,,背景图片:url(“;”);,/*放入滑动条背景图片*/,,background-size: 100%, 100%;
平铺方式才能:不再重演;
,,背景位置:中心;
}
.rotateAu {
动画:才能,rotate 3 s linear 无限;
,}
旋转,@keyframes {
从才能{变换:旋转(0度)}
,,,{变换:旋转(360度)}
以前,} 页面({
数据:{才能
,,,isPlay:假的,
,,},
游戏:函数才能(e) {
,,,如果(this.data.isPlay==true)
,,,{
,,,,,this.setData ({
,,,,,,,isPlay:假的
,,,,,})
,,,}
,,,
,,,{
,,,,,this.setData ({
null
null
null
null
null
如何在微信小程序中实现一个音乐播放页面的布局?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
样式布局代码
wxml:
wxs:
js:
