zoukankan      html  css  js  c++  java
  • 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 {
    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 {
    64px;
    font-size: 12px;
    text-align: right;
    }

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

    .mod-albums .gallery .card {
    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 {
    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>

  • 相关阅读:
    1014 Waiting in Line (30)(30 point(s))
    1013 Battle Over Cities (25)(25 point(s))
    1012 The Best Rank (25)(25 point(s))
    1011 World Cup Betting (20)(20 point(s))
    1010 Radix (25)(25 point(s))
    1009 Product of Polynomials (25)(25 point(s))
    1008 Elevator (20)(20 point(s))
    1007 Maximum Subsequence Sum (25)(25 point(s))
    1006 Sign In and Sign Out (25)(25 point(s))
    1005 Spell It Right (20)(20 point(s))
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11432254.html
Copyright © 2011-2022 走看看