vue2.0 移动端实现下拉刷新和上拉加载更多的示例

2020-06-14 06:16:32易采站长站整理

pageEnd : 0, // 结束页数
listdata: [], // 下拉更新数据存放数组
downdata: [] // 上拉更多的数据存放数组
}
},
mounted : function(){
this.getList();
},
methods: {
getList(){
let vm = this;
vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
vm.listdata = response.data.slice(0,15);
}, (response) => {
console.log('error');
});
},
onRefresh(done) {
this.getList();

done() // call done

},
onInfinite(done) {
let vm = this;
vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
vm.counter++;
vm.pageEnd = vm.num * vm.counter;
vm.pageStart = vm.pageEnd - vm.num;
let arr = response.data;
let i = vm.pageStart;
let end = vm.pageEnd;
for(; i<end; i++){
let obj ={};
obj["name"] = arr[i].name;
vm.downdata.push(obj);
if((i + 1) >= response.data.length){
this.$el.querySelector('.load-more').style.display = 'none';
return;
}
}
done() // call done
}, (response) => {
console.log('error');
});
}
},
components : {
'v-scroll': Scroll
}
}
</script>