Vue音乐--排行榜页面06_详情页面布局

最新推荐文章于 2024-02-29 23:53:15 发布

原创最新推荐文章于 2024-02-29 23:53:15 发布 · 788 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vuex

移动端音乐项目同时被 2 个专栏收录

21 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

六、新建排行榜详情页 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” ** 即可