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

偏执的太偏执、 2023-10-18 12:32 49阅读 0赞

## 前言 ##

前面已经实现热门榜单等，现在要实现更多按钮，点击更多按钮，将跳转到morelist.vue页面，在此页面会加载10条数据。

## 效果 ##

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

## 实现 ##

#### 在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][https_download.csdn.net_download_badao_liumang_qizhi_10846557]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181212222733685.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_badao_liumang_qizhi_10846557]: https://download.csdn.net/download/badao_liumang_qizhi/10846557