效果
底部下拉刷新效果.png
无数据效果.png
组件源码
<template>
<div class="load-more">
<p class="load-more-placeholder" ref="refLoadMore"></p>
<!-- 此处封装loading组件 此处我就直接写加载中了... 你们可以用第三方或者自己封装 -->
<p v-if="!loadEnd" class="load-end-tip">加载中....</p>
<p v-if="loadEnd" class="load-end-tip">到底了~</p>
</div>
</template>
<script>
export default {
name: 'LoadMore',
props: {
loadEnd: {
type: Boolean,
default: false
}
},
mounted() {
this.observer();
},
methods: {
observer() {
this.obs = new IntersectionObserver((entries) => {
if (entries[0].intersectionRatio > 0) {
this.$emit('loadMore');
}
});
this.obs.observe(this.$refs.refLoadMore);
},
disconnect() {
this.obs.disconnect();
}
},
beforeDestroy() {
this.disconnect();
}
};
</script>
<style lang="scss" scoped>
.load-more{
.load-more-placeholder{
width: 100%;
height: 1px;
visibility: hidden;
}
.load-end-tip{
color: #7C8DAF;
font-size: 12px;
// text-align: center;
height: 56px;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
项目中使用
<load-more :loadEnd="loadEnd" @loadMore="load_more" />
data() {
return {
loadEnd: false
}
}
// 加载更多
load_more() {
const _this =this
_this.loadEnd = false
setTimeout(() => {
_this.loadEnd = true
},1000)
}
