前言

前面已經實現熱門榜單等，現在要實現更多按鈕，點擊更多按鈕，將跳轉到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_listthis.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_listthis.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

總結

以上是生活随笔為你收集整理的Vue实现仿音乐播放器9-更多按钮实现数据匹配的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。