VUE project realization music player (two) ------- ranking page

Today, we come to realize the development of the player home page of the leaderboard, which is src \ components \ Rank.vue, effects shots:

 

Pictures of the page, leaderboards name, song information, data interfaces from QQ music, we get a Vue.http.jsonp vue-resource plugin () interface data, the difficulty of this page is CSS layout, use the main display: flex elastic layout, in the middle there are many details that we analyze together.

 

First, access to data, is used Vuex, with its call interface in each component needs to obtain data in the interface, they are not as unified management of them, written in a public function, through this Actions of Vuex of. $ Store.dispatch ( '') can be acquired.

 

We look at the specific implementation, first of all in the src \ config, New api.js, for information export interface address, and other parameters, the next step to facilitate direct import calls, the code is as follows:

export default {
    rank_list: {
        url: 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg',
        params: () => {
            return {
                format: 'jsonp',
                g_tk: 5381,
                uin: 0,
                inCharset: 'utf-8',
                outCharset: 'utf-8',
                notice: 0,
                platform: 'h5',
                needNewCode: 1,
                _: new Date().getTime()
            }
        },
        jsonp: 'jsonpCallback'
    }
}

 

Then New ApiService.js under src \ store:

Vue from Import 'VUE' 

Import from the API '../config/api' 

function apiFactory (API) {// unified interface function 
  return (ID = null) => Vue.http.jsonp ( 
    api.url, 
    { 
      the params: API .params (ID), 
      JSONP: api.jsonp 
    } 
  ) 
} 

Export default { 
  Actions: { 
     getRankList ({}) {// '{}' may be omitted, see the official website Vuex course, if desired, be used to store and commit write 'State {,} the commit' 
      return apiFactory (API.rank_list) () // last '()' function is because the rank_list object reference to an empty transfer function 
    } 
 } 
}

 Then, in src \ store New index.js:

import Vue from 'vue'
import Vuex from 'vuex'

import ApiService from './ApiService'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    ApiService,
  }
})

 View Vuex official website tutorial, as more centralized state we used the latter, we will store is divided into modules, so as not to store objects very bloated.

 

OK, here we have the back-end data acquisition work can be friends. .

 

Let's write front-end components, we will name Rank.vue

 

Created a first-come, life cycle hook, $ store.dispatch get data back-end through this.:

created: function () {
  this.$store.dispatch('getRankList').then((response) => {     //调用 ApiService.js 中 Actions：getRankList
    this.topList = response.data.data.topList
  })
}

 

Can first this.topList () to print out by alert, see the return data structure, and through the v-for presenting it out specific source code reference implementation project, which is here for the CSS knowledge focused on a few talk about.

 

1. Set adaptive screen.

 

Only need to App.vue in:

Screen and @media (min-width: 68vh) { 
  body { 
    width : 68vh ; // if the screen width is greater than 68vh, taken 68vh 
    margin : 0 Auto ; 
  } 
}

 

2. Positioning elements

                         

<div class="rank-media">
  <img class="rankpic" v-lazy="rankItem.picUrl">
  <div class="listen-count">
    {{Math.round(rankItem.listenCount/1000) / 10 + '万' }} 
  </div>
</div>

 

This code is left showing the effect of the above, and we want to achieve the right effect, so that the digital picture went to the lower left corner.

 

Reflect on display: flex not achieve the results we want, but the position: absolute can be achieved, set to absolute positioning of elements box completely removed from the document flow, the elements of the original amount of space will be closed in the normal flow of the document, as if the elements of the original does not exist . Then, the element will be relative to its positioning block comprises, if the parent element is non-static (default) positioned, relative to the parent element or elements relative html.

 

Here, .listen-count of the parent element is .rank-media, adding to the former position: absolute at the same time, must be added to the latter position: relative:

Media-.rank { 
  width : 100px ; 
  height : 100px ; 
  position : relative ; // if the row is removed, .listen-count body will be relatively positioned, reach our aim 
} 

.listen-COUNT { 
  position : Absolute ;   
  font -size : 12px ; 
  Color : White ; 
  bottom : 3px ; 
  left : 5px ; 
}

 

3. Text overflow handling

 

 

We see that, because the first song of the song is too long, resulting in content beyond the expected range, do not worry, the element to add the following CSS properties:

white-space: nowrap // Set the text does not wrap

 

 

However, after setting, and found the name of the singer beyond the boundaries seem pretty page, simply add the following CSS properties to the elements:

overflow: hidden; 
text-overflow: ellipsis; // overflow portion is set to '...'

 

Finally obtained the following effects:

 

Even though the text overflows, they will not affect the appearance of the page.