慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第6章构建新闻详情页面-加入不同的音乐，个性化音乐播放

加入不同的音乐，个性化音乐播放

1.进入目录 pages/posts/post-detail，修改文件 post-detail.wxml，点击播放音乐时背景图变成音乐背景图，停止播放音乐后换回原来的背景图

<!-- 先静后动，先样式再数据 -->
<view class="container">
  <image class="head-image" src="{{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"></image>
  <image catchtap="onMusicTap" class="audio" src="{{isPlayingMusic?'/images/music/music-stop.png':'/images/music/music-start.png'}}"></image>
  <view class="author-date">
    <image class="avatar" src="{{postData.avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{postData.dateTime}}</text>
  </view>
  <text class="title">{{postData.title}}</text>
  <view class="tool">
    <view class="circle-img">
      <image wx:if="{{collected}}" catchtap="onCollectionTap" src="/images/icon/collection.png"></image>
      <image wx:else catchtap="onCollectionTap" src="/images/icon/collection-anti.png"></image>
      <image catchtap="onSharpTap" class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">{{postData.detail}}</text>
</view>

2.测试