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>