> 效果如圖  >1. 制作component組件 在組件中通過play是否為true控制: 圖片是否加`rotate` 旋轉屬性，以及播放圖片的src ``` --music.wxml-- <view class="banner"> <image class="{{play?'rotate':''}}" src="/images/banner.png" /> <image class="play" src="{{play?'/images/play.png':'/images/pause.png'}}" mode="widthFix" bindtap="onMusic"/> </view> ``` ``` --rotate動畫-- .rotate { animation: rotate 3s linear infinite; //linear線性平滑過渡 } @keyframes rotate { 0% { transform: rotate(0);} 100% { transform: rotate(360deg);} } ``` >2. 注冊并使用組件 先在index.json中注冊組件 ``` "usingComponents":{ "v-music": "/components/music/music" } ``` 再在index.wxml中使用并通過屬性傳遞數據 ``` <v-music title="{{music.title}}" url="{{music.url}}"></v-music> ``` >3. 組件接受所需數據 ``` --music.js-- properties: { title: String, url: String } ``` >4. 實現點擊功能 ``` const audio = wx.getBackgroundAudioManager(); methods: { onPlay(){ if(this.data.isPlay){ audio.pause(); this.setData({ isPlay: !this.data.isPlay }) }else{ audio.title = this.properties.mTitle; audio.src = this.properties.mUrl; this.setData({ isPlay: !this.data.isPlay }); } } }, attached(){ /* 音樂播放 */ audio.onPlay(()=>{ this.setData({ play: true }); }); /* 暫停 */ audio.onPause(()=>{ this.setData({ play: false }); }); /* 停止 */ audio.onStop(()=>{ this.setData({ play: false }); }); /* 播放完 */ audio.onEnded(()=>{ this.setData({ play: false }); }); } ```