滚动到底部加载效果效果&数据全部加载完成效果:
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">
list放在此处
</InfiniteLoading >
</template>