Vue自定义滚动列表加载更多组件

滚动到底部加载效果效果&数据全部加载完成效果：

InfiniteLoading组件代码：

<template>
	<!--  滚动到底部 加载更多组件-->
	<div class="InfiniteLoading">
		<div class="InfiniteLoading-wrapper">
			<slot></slot>
		</div>
		<div class="InfiniteLoading-tips" id="load-more">
			<div v-if="loadingMore">正在获取更多内容<span>...</span></div>
			<div v-if="noMore">{{ copywritBottom }}</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'InfiniteLoading',
	props: {
		loadingMore: { type: Boolean }, //正在获取更多内容……
		noMore: { type: Boolean }, //没有更多了
		copywritBottom: {
			type: String,
			default: '没有更多了',
		},
	},
	mounted() {
		this.load()
	},
	methods: {
		load() {
			const intersectionObserver = new IntersectionObserver(
				(entries) => {
					if (entries[0].isIntersecting) {
						//  调用接口
						this.$emit('load')
					}
				},
				{
					threshold: [0, 0.25, 0.5, 0.75, 1], //当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
				}
			)
			intersectionObserver.observe(document.querySelector('#load-more'))
		},
	},
}
</script>

<style lang="less" scoped>
.InfiniteLoading {
	&-wrapper {
	}

	.InfiniteLoading-tips {
		height: 1px;
		text-align: center;
		margin: 14px 0 43px 0;
		font-size: 16px;
		color: rgba(0, 0, 0, 0.3);
		line-height: 26px;
		//border: 1px solid #000;

		span {
			display: inline-block;
			height: 1em;
			line-height: 1;
			text-align: left;
			vertical-align: -0.25em;
			overflow: hidden;

			&::before {
				display: block;
				content: '...\A..\A.';
				white-space: pre-wrap;
				animation: loading 3s infinite step-start both;
			}
		}
	}
}

//正在获取更多内容点点动画
@keyframes loading {
	33% {
		transform: translateY(-2em);
	}
	66% {
		transform: translateY(-1em);
	}
}
</style>

使用方法：

<script>
	import InfiniteLoading from '@/components/InfiniteLoading';
	export default {
		components: { InfiniteLoading },
		data(){
			return{
			  loadingShow: false, //loading动画效果
		      loadingMore: false, //正在获取更多内容……
		      noMore: false, //没有更多了
		      total: 0,
		      paramsData:{
		      	pageNum:1,
		      }
			}
		},
		methods:{
			/*
		     * 滚动加载
		     * */
		    load() {
		      if (!this.loadingMore && !this.loadingShow) {
		        if (this.paramsData.pageNum >= this.total && this.total) {
		          this.noMore = true
		        } else {
		          this.loadingMore = true
		          this.paramsData.pageNum++
		          console.log('调用获取list数据接口')
		        }
		      }
		    },
		}
	}
	
</script>

<template>
	<InfiniteLoading :loadingMore="loadingMore" :noMore="noMore" @load="load">
	list放在此处
	</InfiniteLoading >
</template>