欧美人与动牲交zooz,久久这里只有精品18,啦啦啦在线视频免费观看高清 ,欧美激情网,国产欧美亚洲高清 ,久久综合噜噜激激的五月天

組件名稱：音樂播放組件。

屬性

代碼

properties: {
 // 音樂路徑
 music: {
 type: String,
 value: '',
 observer: function (newVal) {
 this._initMusic(newVal)
 }
 },
 // 樣式
 musicStyle: {
 type: String,
 value: 'position: absolute; right: 20rpx; top: 20rpx; width: 100rpx; height: 100rpx;'
 },
 // 播放時(shí)是否有旋轉(zhuǎn)效果
 rotate: {
 type: Boolean,
 value: true
 },
 // 播放時(shí)的icon路徑
 iconOn: {
 type: String,
 value: '/resources/img/music-on.png' // 請(qǐng)?zhí)顚懩J(rèn)的圖片地址
 },
 // 暫停時(shí)的icon路徑
 iconOff: {
 type: String,
 value: '/resources/img/music-off.png' // 請(qǐng)?zhí)顚懩J(rèn)的圖片地址
 }
 }

初始化音樂

首先，在properties中接收頁(yè)面?zhèn)鱽淼囊魳肺募刂罚?/span>

music: {
 type: String,
 value: '',
 observer: function (newVal) {
 this._initMusic(newVal)
 }
}

這里的處理是，一旦接收到頁(yè)面?zhèn)鱽淼?music 地址，就初始化音樂：

_initMusic: function (newVal) {
 // 當(dāng)頁(yè)面?zhèn)鱽硇碌膍usic時(shí)，先銷毀之前的audioCtx，否則頁(yè)面會(huì)很嗨
 if (this.data.audioCtx) {
 this.data.audioCtx.destroy()
 }
 if (newVal) {
 var audioCtx = wx.createInnerAudioContext()
 this.setData({
 audioCtx: audioCtx
 })
 if (this.data.audioStatus == '1') {
 audioCtx.autoplay = true
 }
 audioCtx.loop = true
 audioCtx.src = newVal
 }
}

audioStatus 用來記錄音樂播放狀態(tài)，在data中默認(rèn)設(shè)置為1：

data: {
 icon: '',
 audioStatus: 1,
 audioCtx: '',
 musicClass: 'music-on'
}

wxml文件里，只用一個(gè) 標(biāo)簽：

<image class='music {{ rotate && musicClass }}' 
 style="{{ musicStyle }}" 
 src="{{ icon }}" 
 bindtap='_switch' 
 wx:if="{{ music }}"></image>

其中， icon 在組件ready()時(shí)賦值成播放狀態(tài)的icon：

ready() {
 this.setData({
 icon: this.data.iconOn
 })
}

音樂旋轉(zhuǎn)效果

音樂播放時(shí)的旋轉(zhuǎn)效果，是用css動(dòng)畫實(shí)現(xiàn)的，wxss文件如下：

.music {
 position: absolute;
 z-index: 99;
 -webkit-animation-iteration-count: infinite;
}
/* 旋轉(zhuǎn)class */
.music-on {
 animation: music-rotate 4s linear infinite;
}
/* 旋轉(zhuǎn)動(dòng)畫 */
@keyframes music-rotate {
 0% {
 transform: rotateZ(0deg);
 }
 100% {
 transform: rotateZ(360deg);
 }
}

當(dāng) rotate 為true時(shí)，使 musicClass 的值為 music-on，就能實(shí)現(xiàn)旋轉(zhuǎn)了。

當(dāng)然， musicClass 需要用 this.setData 的方式來切換值。

音樂控制

手動(dòng)切換

手動(dòng)點(diǎn)擊時(shí)，用取反的邏輯控制音樂的播放和暫停：

_switch: function () {
 // 如果是播放就停止 
 if (this.data.audioStatus) {
 this.setData({
 audioStatus: 0,
 icon: this.data.iconOff,
 musicClass: ''
 })
 this.data.audioCtx.pause()
 // 如果是停止就播放
 } else {
 this.setData({
 audioStatus: 1,
 icon: this.data.iconOn,
 musicClass: 'music-on'
 })
 this.data.audioCtx.play()
 }
}

其它情況

同時(shí)，還要對(duì)下列情況做處理：

分享時(shí)，進(jìn)入選好友界面、音樂停止，分享回來后，音樂沒有繼續(xù)播放 
從此頁(yè)面跳轉(zhuǎn)到下一個(gè)頁(yè)面時(shí)，音樂還在繼續(xù) 
從此頁(yè)面撤回到上一個(gè)頁(yè)面時(shí)，音樂還在繼續(xù) 
解決的方法，是在組件的methods中又寫了兩個(gè)方法：

// 寫在組件的methods中：
// 在引用組件頁(yè)面的onShow()中調(diào)用
//  否則，如果當(dāng)發(fā)生分享頁(yè)面行為并返回時(shí)，音樂不會(huì)自動(dòng)播放
onShow: function () {
 if (this.data.music && this.data.audioStatus) {
 this.data.audioCtx.play()
 }
},
// 在引用組件頁(yè)面的onHide()中調(diào)用
//  否則，在跳轉(zhuǎn)到下一個(gè)頁(yè)面后，音樂還在繼續(xù)
onHide: function () {
 if (this.data.music && this.data.audioStatus) {
 this.data.audioCtx.pause()
 }
 this.setData({
 animationData: {}
 })
}

這兩個(gè)方法分別在頁(yè)面中的 onShow 和 onHide 中調(diào)用，調(diào)用方式就是父組件獲取到子組件實(shí)例對(duì)象：

例如，給組件加id為"music-componet"，調(diào)用時(shí)就是：

// 寫在調(diào)用頁(yè)面中
onShow: function () {
 this.selectComponent('#music-component').onShow()
},
onHide: function () {
 this.selectComponent('#music-component').onHide()
}

最后，在組件的detached中也調(diào)用一下 onHide 方法：

// 頁(yè)面關(guān)閉時(shí)銷毀音樂
detached() {
 this.onHide()
}

熱門推薦: 上海微信小程序 小程序開發(fā) 小程序設(shè)計(jì) 支付寶小程序 百度小程序?