vue上拉加载更多

版权声明：企业站，小游戏制作 https://blog.csdn.net/qq947289507/article/details/87735300

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>