zoukankan      html  css  js  c++  java
  • VueMusic-8更多-下拉刷新

    1.插件地址:https://github.com/bajian/vue-pull-to-refresh

    2.安装:cnpm install --save pull-to-refresh

    3.引入:import VuePullRefresh  from "vue-pull-refresh"

    4.实例

    <template>
    <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>
    import VuePullRefresh from "vue-pull-refresh"

    export default {
    name: "morelist",
    data() {
    return {
    moreListData: [],
    offset:0
    }
    },
    components:{VuePullRefresh},
    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);
    })
    },
    methods:{
    onRefresh:function(){
    var that = this;
    const moreListUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.$route.params.type +"&size=12&offset="+that.offset;
    return new Promise(function (resolve, reject) {
    setTimeout(() => {
    that.$axios.get(moreListUrl)
    .then(res => {
    console.log(res.data);
    that.offset >= res.data.billboard.billboard_songnum - 12 ? console.log("没数据了") : that.offset += 12,
    // that.moreListData = that.moreListData.concat(res.data.song_list)
    console.log(that.offset)
    that.moreListData= res.data.song_list
    //that.moreListData=that.moreListData.concat(res.data.song_list)累加
    resolve();
    })
    .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>

  • 相关阅读:
    百度云如何免费扩容至2055G?
    OKR学习总结
    layui和bootstrap 对比
    使用马克飞象+印象笔记 如何简单便捷地发表博客?
    Sublime使用记录之SublimeServer插件介绍
    12.RcolorBrewer包
    11.R语言流程
    25.conda 下载安装与运用
    7、purge_haplogs 基因组去冗余
    5.MCScanX 与circos下载、安装、运用
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11432299.html
Copyright © 2011-2022 走看看