VUE移動端音樂APP學習【十八】：排行榜首頁開發

阿新 • • 發佈：2021-06-27

前面的推薦和歌手頁面已經開發完了，接下來就是排行榜首頁開發

排行榜首頁的基礎樣式如下：

<template>
  <div class="rank">
    <div class="toplist">
      <ul>
        <li class="item">
          <div class="icon">
            <img width="100" height="100" />
          </div>
          <ul class="songlist" 
>
            <li class="song">
              <span></span>
              <span></span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rank',
};

</ 
script>
<style lang="scss" scoped>
.rank {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;

  .toplist {
    height: 100%;
    overflow: hidden;

    .item {
      display: flex;
      margin: 0 20px;
      padding-top: 20px;
      height: 100px;

      &:last-child {
        padding-bottom: 20px 
;
      }

      .icon {
        flex: 0 0 100px;
        width: 100px;
        height: 100px;
      }

      .songlist {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px;
        height: 100px;
        overflow: hidden;
        background: $color-highlight-background;
        color: $color-text-d;
        font-size: $font-size-small;

        .song {
          @include no-wrap();

          line-height: 26px;
        }
      }

      .loading-container {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>

View Code

執行後可以看到排行榜頁面大致是這樣的頁面結構：

下面就是抓取資料

在api資料夾下建立rank.js 定義連線介面方法

import axios from 'axios';

export function getTopList() {
  return  axios.get('/api/toplist');
}

在rank.vue中使用該方法獲取介面資料

 created() {
    this._getTopList();
  },
  methods: {
    _getTopList() {
      getTopList().then((res) => {
        console.log(res);
        if (res.data.code === ERR_OK) {
          console.log(res.data.list);
        }
      });
    },
  },

獲取到的資料如下：

接下來就是將這些資料對映到dom上

首先在data()裡面定義一個變數topList

 data() {
    return {
      topList: [],
    };
  },

將獲取到的資料賦值給變數topList

 _getTopList() {
      getTopList().then((res) => {
        if (res.data.code === ERR_OK) {
          this.topList = res.data.list;
        }
      });
    },

在dom上遍歷topList

<div class="rank">
    <div class="toplist">
      <ul>
        <li class="item" v-for="(item,index) in topList" :key="index">
          <div class="icon">
            <img width="100" height="100" v-lazy="item.coverImgUrl" />
          </div>
          <ul class="songlist">
            <li class="song">
              <h1>{{item.name}}</h1>
              <span>{{item.description}}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

效果圖

引入scroll元件，父元素要應用scroll元件才能進行滾動

<scroll :data="topList" class="toplist">
...
</scroll>

import Scroll from '../../base/scroll/scroll';

components: {
    Scroll,
  },

因為是非同步獲取的資料所以要加一個loading的狀態

<div class="loading-container" v-show="!topList.length">
        <loading></loading>
</div>


import Loading from '../../base/loading/loading';

  components: {
    Scroll,
    Loading,
  },

還需要優化一個地方：當底部有迷你播放器出現佔位的時候，就需要處理一下底部的高度。

解決方法：用之前寫過的playlistMixin解決這個問題。

引入playlistMixin

import { playlistMixin } from '../../common/js/mixin';
mixins: [playlistMixin],

給需要修改的dom元素加上引用

<div class="rank" ref="rank">
    <scroll :data="topList" class="toplist" ref="toplist">

在methods裡重新定義handlePlaylist(playlist) 方法

 handlePlaylist(playlist) {
      const bottom = playlist.length > 0 ? '60px' : '';
      this.$refs.rank.style.bottom = bottom;
      // 呼叫refresh()讓scroll重新計算高度
      this.$refs.toplist.refresh();
    },