大概步骤：

目标效果

六、新建排行榜详情页 HTML布局

• 要点：
  • 使用滑动动画
  • 引用封装好的公共组件musiclist即可
  • 传入从store中的数据，进组件中
  • 引用加载中组件

  <transition name="slide">
  <div class="rank-detail">
    <music-list :title="topList.topTitle" :bgimg="topList.picUrl"></music-list>
    <!--加载中公共组件-->
    <div class="rank-loading">
      <loading v-show="!topList"></loading>
    </div>
  </div>
</transition>

• 在上一篇05中已经获取到了state中的topList数据
• 因此传入 ** :title=“topList.topTitle” :bgimg=“topList.picUrl” ** 即可
  

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：[email protected]