前言
前面已经实现热门榜单等,现在要实现更多按钮,点击更多按钮,将跳转到morelist.vue页面,在此页面会加载10条数据。
效果
实现
在pages下新建morelist.vue更多页面组件
代码:
<template lang="html">
<div class="more-list">
<div class="wrapper">
<h3>{{ this.$route.params.title }}</h3>
<VuePullRefresh :on-refresh="onRefresh">
<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>
</VuePullRefresh>
</div>
</div>
</template>
<script>
export default {
name:"morelist",
data(){
return{
moreListData:[],
offset:0
}
},
mounted(){
const moreListUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+this.$route.params.musictype+"&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);
})
}
}
</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>
在router下的index.js中配置路由
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
import Home from "@/pages/home"
import Artists from "@/pages/artists"
import ListCate from "@/pages/listcate"
import Ucenter from "@/pages/ucenter"
import Search from "@/pages/search"
import HotList from "@/pages/musiclist/hot_list"
import KingList from "@/pages/musiclist/king_list"
import NewsList from "@/pages/musiclist/news_list"
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:"listcate",
component:ListCate
},
{
path:"ucenter",
component:Ucenter
},
{
path:"search",
component:Search
},
{
path:"more",
name:"MoreList",
component:MoreList
}
]
}
]
})
知识点
在今日推荐页面通过路由传递参数,将标题以及音乐类型作为参数传递过去。
<router-link :to="{ name:'MoreList',params:{musictype:this.type,title:title}}" tag="div">
更多
</router-link>
在更多页面,接受参数
<h3>{{ this.$route.params.title }}</h3>
完整代码
Today_Recommend.vue
<template lang="html">
<div class="mod-albums">
<div class="hd log url">
<h2>{{title}}</h2>
<router-link :to="{ name:'MoreList',params:{musictype: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:"今日榜单"
},
url:{
type:String,
default:"/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=6&offset=0"
},
type:{
type:String,
default:"1"
}
},
mounted(){
var url = this.HOST + this.url;
this.$axios.get(url)
.then(res => {
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>
morelist.vue
<template lang="html">
<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:[],
offset:0
}
},
components:{
},
mounted(){
const moreListUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.$route.params.musictype +"&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);
})
}
}
</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>
此部分代码对应分阶段代码中阶段六
分阶段代码下载位置:
https://download.csdn.net/download/badao_liumang_qizhi/10846557