前言

前面已经实现热门榜单等，现在要实现更多按钮，点击更多按钮，将跳转到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-更多按钮实现数据匹配相关推荐

Vue实现仿音乐播放器10-更多按钮实现下拉刷新
效果 vue-pull-refresh插件 github地址: https://github.com/lakb248/vue-pull-refresh 在线Demo演示: https://lakb24 ...
Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
vue 判断同一数组内的值是否一直_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
后端实体类接收数组_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目...
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
Vue实现仿音乐播放器14-实现搜索页面以及功能
效果实现百度音乐搜索API说明例:method=baidu.ting.search.catalogSug&query=海阔天空参数:query = " //搜索关键字搜索页 ...
Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能
场景从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面, 播放界面调用百度音乐接口实现数据的获取以及音乐的播放. 效果实现配置路由首先在pages目录下新建musicp ...

Vue实现仿音乐播放器9-更多按钮实现数据匹配

前言

效果

实现

在pages下新建morelist.vue更多页面组件

在router下的index.js中配置路由

知识点

完整代码

Today_Recommend.vue

morelist.vue

Vue实现仿音乐播放器9-更多按钮实现数据匹配相关推荐

最新文章

热门文章