0.3.8 • Published 3 years ago
infinity-scroll-vue3 v0.3.8
infinite-scroll(infinity-scroll)
抽离自element-plus的vue3无限加载指令,用法同element-pluas/infinity-scroll
See infinity-scroll.
Attributes
Example
<template>
<div class="infinite-list-wrapper" style="overflow:auto;height:100px">
<ul
class="list"
v-infinite-scroll="load"
:infinite-scroll-disabled="disabled">
<li v-for="i in count" class="list-item" :key="i">{{ i }}</li>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore&&!loading">没有更多了</p>
</div>
</template>
import InfiniteScroll from 'infinity-scroll-vue3'
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
directives: {
InfiniteScroll
},
setup() {
const count = ref(40);
const loading = ref(false);
const noMore = computed(() => count.value >= 200);
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
loading.value = true;
setTimeout(() => {
count.value += 10
loading.value = false
}, 2000)
}
return {
count,
loading,
noMore,
disabled,
load
}
}
})