封装loadmore组件
template>
<div v-if="!has_more">暂无更多数据</div>
<div class="load_more" v-else>加载中</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
props: {
has_more: {
type: Boolean,
require: true
}
},
setup() {
},
mounted() {
const io = new IntersectionObserver(entries => {
if (entries[0].intersectionRatio > 0) {
this.$emit('loadMore');
}
});
io.observe(document.querySelector('.load_more'));
},
})
</script>
使用方法
<template>
<div class="list">
<ul>
<li v-for="item in list">
{{ item }}
</li>
</ul>
<LoadMore @loadMore="load_more" :has_more="has_more"></LoadMore>
</div>
</template>
<script lang="ts">
import LoadMore from '../../component/Load/LoadMore.vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
LoadMore
},
setup() {
const list = ref<number>(40);
let has_more = ref<Boolean>(true);
return {
list,
has_more,
}
},
methods: {
load_more() {
this.list += 20;
if (this.list > 99) {
this.has_more = false;
}
}
}
})
</script>