VueMusic-7更多-数据适配

1.实例：路由传参

<template>
<div class="more-list">
<div class="wrapper">
<h3>{{ this.$route.params.title }}</h3>
<div class="info url log" v-for="(item,index) in moreListData" :key="index">
<div class="poster">
<img :src="item.pic_big" :alt="item.title">
</div>
<div class="text-wrap">
<div class="title">{{ item.title }}</div>
<div class="author">{{ item.artist_name }}</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: "morelist",
data() {
return {
moreListData: []
}
},
mounted() {
const moreListUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type=" + this.$route.params
.type + "&size=12&offset=0"
this.$axios.get(moreListUrl)
.then(res => {
this.moreListData = res.data.song_list
this.offset = this.offset + 12
})
.catch(error => {
console.log(error);
})
}
/* props:{
type:{
type:Number,
default:1
}
} */
}
</script>

<style scoped>
.wrapper {
padding-top: 13px;
text-align: center;
margin-bottom: 10px;
background: #fff;
clear: both;
overflow: hidden;
}

h3 {
font-size: 22px;
text-align: left;
margin-left: 17px;
margin-bottom: 5px;
}

.wrapper .info {
width: 42%;
float: left;
text-align: center;
padding-left: 17px;
display: block;
text-align: left;
margin-bottom: 10px;
position: relative;
}
</style>

2.

import MoreList from "@/pages/morelist"
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Index',
redirect: '/Home',
component: Index,
children: [{
path: 'Home',
component: Home,
redirect: "/home/hot",
children: [{
path: 'hot',
component: HotList
},
{
path: 'king',
component: KingList
},
{
path: 'news',
component: NewsList
}
]
}, {
path: 'Artists',
component: Artists
}, {
path: 'Search',
component: Search
}, {
path: 'Listcate',
component: Listcate
}, {
path: 'Ucenter',
component: Ucenter
},
{
path: 'More',
name:"MoreList",
component: MoreList
}]
}]
})

3.实例

<template>
<div class="mod-albums">
<div class="hd log url">
<h2>{{title}}</h2>
<!-- <div></div> -->
<router-link :to="{name:'MoreList',params:{type:this.type,title:title}}" tag="div">更多</router-link>
</div>
<div class="container">
<div class="gallery">
<div class="scroller">
<div class="card url" v-for="(item,index) in todayRecommend" :key="index">
<div class="album">
<img :src="item.pic_big" :alt="item.title">
<div class="name">{{item.title}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: "todayRecommend",
data() {
return {
todayRecommend: []
}
},
props:{
title:{
type:String,
default:"今天榜单"
},
type:{
type:String,
default:"1"
},

},
mounted() {
var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+this.type+"&size=6&offset=0"
this.$axios.get(url)
.then(res => {
console.log(res.data);
this.todayRecommend = res.data.song_list
}).catch(error => {
console.log(error)
})
}
}
</script>

<style scoped>
.mod-albums {
background-color: #fff;
padding: 10px 17px;
}

.hd {
display: flex;
margin: 14px 0 18px 0;
}

.hd h2 {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
margin: 0;
padding: 0;
font-size: 20px;
}

.hd div {
width: 64px;
font-size: 12px;
text-align: right;
}

.mod-albums .gallery {
overflow: hidden;
margin: 0 -5px;
}

.mod-albums .gallery .card {
width: 33.3%;
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 5px 10px;
}

.mod-albums .gallery .card .album {
position: relative;
}

.mod-albums .gallery .card img {
width: 100%;
height: auto;
border: 1px solid #eee;
}

.mod-albums .gallery .card .name {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 4px;
line-height: 14px;
max-height: 28px;
margin-bottom: 2px;
}
</style>

 

转载于:https://www.cnblogs.com/xiao-peng-ji/p/11432254.html