VUE reproductor de música realización del proyecto (dos) ------- graduación de la página

Hoy en día, nos damos cuenta el desarrollo de la página principal jugador de la clasificación, que es \ src \ Rank.vue componentes, tomas de efectos:

 

Las fotos de la página, el nombre tablas de clasificación, información de la canción, interfaces de datos de música QQ, obtenemos un plugin vue-recursos Vue.http.jsonp () datos de la interfaz, la dificultad de esta página es de diseño CSS, utilice la pantalla principal: diseño elástico de flexión, en el medio hay muchos detalles que se analizan en conjunto.

 

En primer lugar, el acceso a los datos, se utiliza Vuex, con su interfaz de llamada en las necesidades de cada componente para obtener datos en la interfaz, que no son tan gestión unificada de ellos, escrito en una función pública, a través de acciones de esta Vuex de. $ Store.dispatch ( '') pueden ser adquiridos.

 

Nos fijamos en la aplicación específica, en primer lugar en el directorio src \ config, New api.js, para la información de la dirección de exportación interfaz, y otros parámetros, el siguiente paso para facilitar las llamadas directas de importación, el código es el siguiente:

por defecto de exportación { 
    rank_list: { 
        url: 'https://cyqq.com/v8/fcg-bin/fcg_myqq_toplist.fcg', 
        params: () => { 
            retorno { 
                formato: 'jsonp', 
                g_tk: 5381, 
                uin: 0 , 
                inCharset: 'UTF-8', 
                outCharset: 'UTF-8', 
                aviso: 0, 
                plataforma: 'h5', 
                needNewCode: 1, 
                _:. new Date () getTime () 
            } 
        }, 
        jsonp: 'jsonpCallback' 
    } 
}

 

Entonces Nuevos ApiService.js Bajo comercial src \:

Vue de Importar 'VUE' 

Importar en el API '../config/api' 

apiFactory función (API) {// unificado función de interfaz 
  de retorno (ID = null) => Vue.http.jsonp ( 
    api.url, 
    { 
      las params: API .params (ID), 
      JSONP: api.jsonp 
    } 
  ) 
} 

por defecto de exportación { 
  Acciones: { 
     getRankList ({}) {// '{}' puede omitirse, consulte el sitio web oficial Vuex supuesto, si se desea, ser utilizado para almacenar y comprometerse escritura 'Estado {,} el commit' 
      apiFactory retorno (API.rank_list) () // última '()' función se debe a que la referencia al objeto rank_list a una función de transferencia vacía 
    } 
 } 
}

 Luego, en src \ tienda New index.js:

importación de Vue 'vue' 
importación de Vuex 'vuex' 

ApiService importación de './ApiService' 

Vue.use (Vuex) 

por defecto de exportación nueva Vuex.Store ({ 
  módulos: { 
    ApiService, 
  } 
})

 Ver página web oficial Vuex tutorial, como el estado más centralizado se utilizó la última, que almacenará se divide en módulos, de manera que no se opone muy hinchada tienda.

 

OK, aquí tenemos el trabajo de adquisición de datos back-end pueden ser amigos. .

 

componentes front-end de escritura vamos, nombraremos Rank.vue

 

Creado por orden de llegada, gancho ciclo de vida, $ store.dispatch Obtener datos de back-end a través de este .:

creado: function () {
   este $ store.dispatch (. ' getRankList ' ) .then ((respuesta) => {//调用ApiService.js中acciones: getRankList
     este .topList = response.data.data.topList 
  }) 
}

 

Puede primera this.topList () para imprimir a cabo por alerta, ver la estructura de datos de retorno, ya través de la v-para presentarlo a cabo la ejecución del proyecto de referencia del código fuente específica, que está aquí para el conocimiento de CSS se centró en un pocos hablan.

 

1. Conjunto de pantalla adaptativa.

 

Sólo es necesario App.vue en:

Pantalla y @media (min-width: 68vh) { 
  body { 
    anchura : 68vh ; // si la pantalla anchura es mayor que 68vh, tomada 68vh 
    margen : 0 Auto ; 
  } 
}

 

2. Los elementos de posicionamiento

                         

<div clase = " rango-media " > 
  <img clase = " rankpic " = v-perezosa " rankItem.picUrl " > 
  <div clase = " escuchar-recuento " > 
    {{Math.round (rankItem.listenCount / 1000 ) / 10 + ' 万' }} 
   </ div> 
</ div>

 

Este código se deja que muestra el efecto de lo anterior, y queremos que para lograr el efecto deseado, por lo que la imagen digital, se dirigió a la esquina inferior izquierda.

 

Reflejan en la pantalla: Flex no lograr los resultados que queremos, pero la posición: absoluta se puede lograr, conjunto de posicionamiento absoluto de elementos de caja completamente retirado del flujo de documentos, los elementos de la cantidad original de espacio se cerrarán en el flujo normal del documento, como si el no existen elementos del original . Entonces, el elemento será con relación a su bloque de posicionamiento comprende, si el elemento padre es no estático (por defecto) posicionado, con respecto al elemento padre o elementos html relativa.

 

Aquí, .listen-recuento del elemento padre es .rank-media, añadiendo a la posición anterior: absoluta al mismo tiempo, debe ser añadido a la última posición: relativa:

Media-.rank { 
  anchura : 100px ; 
  altura : 100px ; 
  posición : relativa ; // si se retira la fila, el cuerpo de recuento .listen será relativamente posicionada, llegar a nuestro objetivo 
} 

.listen-COUNT { 
  posición : Absolute ;   
  fuente -size : 12px ; 
  color : blanco ; 
  inferior : 3px ; 
  la izquierda : 5px ; 
}

 

manejo de desbordamiento 3. Texto

 

 

Vemos que, debido a que la primera canción de la canción es demasiado largo, lo que resulta en contenido más allá del rango esperado, no se preocupe, el elemento para agregar las siguientes propiedades CSS:

white-space: // Conjunto nowrap el texto no envolver

 

 

Sin embargo, después de ajuste, y encontró el nombre del cantante más allá de los límites de la página parece bastante, sólo tiene que añadir las siguientes propiedades CSS a los elementos:

overflow: hidden; 
text-overflow: puntos suspensivos; // desbordamiento porción se establece en '...'

 

Finalmente obtenido los siguientes efectos:

 

A pesar de que el texto se desborda, no van a afectar a la apariencia de la página.