微信小程序?qū)崿F(xiàn)音樂播放頁面布局
更新時間：2020年12月11日 14:25:19 作者：The pure land
這篇文章主要為大家詳細介紹了JS實現(xiàn)京東商品分類側邊欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)音樂播放頁面的布局，供大家參考，具體內(nèi)容如下
1.效果圖如下，點擊播放按鈕后，光碟轉動，播放按鈕變?yōu)闀和０粹o；播放中點擊暫停，光碟復位，暫停按鈕恢復為播放按鈕。
本文僅提供樣式布局，其他具體響應不作介紹
2.樣式布局代碼
wxml:
<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:
.page_music{
position: absolute;
width: 100%;
height: 80%;
}
.icon{
position: relative;
width: 500rpx;
height: 500rpx;
top:5%;
left: 125rpx;
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: 100rpx;
height: 100rpx;
position: absolute;
left: 0;
top:0;
background-image: url(""); /*放入上一首圖標*/
background-size: 100% 100%;
background-repeat:no-repeat;
background-position: center;
}
.play{
width: 100rpx;
height: 100rpx;
position: absolute;
left: 42%;
top:0;
background-image: url(""); /*放入播放圖標*/
background-size: 100% 100%;
background-repeat:no-repeat;
background-position: center;
}
.pause{
width: 100rpx;
height: 100rpx;
position: absolute;
left: 42%;
top:0;
background-image: url(""); /*放入暫停圖標*/
background-size: 100% 100%;
background-repeat:no-repeat;
background-position: center;
}
.next{
width: 100rpx;
height: 100rpx;
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: 80rpx;
height: 80rpx;
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 3s linear infinite;
}
@keyframes rotate{
from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}
js:
Page({
data:{
isPlay:false,
},
play:function(e){
if(this.data.isPlay==true)
{
this.setData({
isPlay:false
})
}
else
{
this.setData({
isPlay:true
})
}
}
})
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了JS組件Bootstrap Table使用方法，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下2016-08-08
本文主要介紹了快速排序思想與冒泡排序思想。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
JS表格組件神器bootstrap table詳解（基礎版）
這篇文章主要介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風格，用戶體驗比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2015-12-12
MSN消息提示類...2006-09-09
循環(huán)處理是最常見的編程模式之一，也是提升性能必須關注的要點之一。本文將對此進行介紹。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript 放大鏡是我成為前端后寫的第一個組件, 從中學到了很多東西. 現(xiàn)在已經(jīng)過去超過半年, 我希望能在自己仍有印象的時候, 整理和重新思考其中的一些處理方法, 將它改進, 并將這些想法寫出來2011-05-05
本例將實現(xiàn)這樣的一個效果：下拉到一定距離后按鈕才顯示出來，鼠標放到按鈕上時，按鈕背景會變成灰色，并且圖標變成了文字。點擊按鈕緩慢回到頂部2014-04-04
大家都知道js是不能跨域的，但我們有時候就要這么用，怎么辦呢？辦法總是有的.2009-07-07
這篇文章主要給大家介紹了關于微信小程序位置授權處理的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
在網(wǎng)頁使用過程中，經(jīng)常會用到代碼的展示。代碼高亮可以直觀的了解代碼，本文主要介紹了highlight.js 代碼高亮插件的使用詳解，具有一定的參考價值，感興趣的可以了解一下2022-01-01