app.vue
<template>
<div id="app">
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<div class="con">
<p v-for="(el,key) in arr" :key="key">{{el}}</p>
</div>
<LoadMoreCom v-on:getNewData="getNewData" :loadMoreObj="loadMoreObj"></LoadMoreCom>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import LoadMoreCom from './components/LoadMoreCom.vue'
export default {
components: {
HelloWorld,LoadMoreCom
},
data(){
return {
arr:[],
loadMoreObj:{
url:'/api/getInfo',
pageSize:10,
}
}
},
methods:{
getNewData(_arr){
this.arr=this.arr.concat(_arr);
}
}
}
</script>
<style>
p{padding: 10px 0;margin-bottom: 10px;height: 50px;background: #f00;color: #fff;}
</style>
LoadMoreCom.vue
<template>
<div class="loadMore" v-loading="isLoading">
{{isEnd?'没有了':'加载更多'}}
</div>
</template>
<script>
import $ from 'jquery'
export default {
props: ['loadMoreObj'],
created(){
var that=this;
$(window).scroll(function(){
// scroll at bottom
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
that.startLoad();
}
});
this.startLoad();
},
data(){
return {
isEnd:false,
isLoading:false,
curPage:1,
}
},
methods:{
startLoad(){
if(this.isLoading || this.isEnd){
return;
}
this.isLoading=true;
var that=this;
// ajax需要的参数,自己根据逻辑修改
var obj={
curPage:this.curPage,
pageSize:this.loadMoreObj.pageSize,
url:this.loadMoreObj.url,
}
console.log(obj);
// 模拟数据请求
setTimeout(function(){
that.isLoading=false;
that.curPage++;//当前页码
// 假如第四页结束
if(that.curPage==4){
that.pageEnd();
return;
}
var arr=[
"你好1","你好1","你好1","你好1","你好1","你好1","你好1","你好1",
]
that.$emit('getNewData',arr);
},1000)
},
// 最后一页
pageEnd(){
this.isEnd=true;
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loadMore{text-align: center;}
</style>