jx-vue3-load-more v1.0.0

介绍

基于vue3.0的上拉加载更多组件

组件使用

安装

npm install --save jx-vue3-load-more

使用

<template> 
   <div v-for="(item, i) in list" :key="i"> 
     <p class="item">{{item.name}}</p> 
   </div>
   <load-more
     :status="loadingType"
     @loadMoreData="loadMoreData"
</load-more> 
   </div> 
</template>
<script setup>
 import LoadMore from 'jx-vue3-load-more'
 import { ref, onMounted } from 'vue'
 let list = ref([])
 let loadingType = ref('more')
 let pageNo = ref(1)  // 当前页数
 let isLastPage = ref(false) // 是否最后一页

onMounted(() => { loadData() }) function loadData() { loadingType.value = 'loading' setTimeout(() => { list.value = list.value.concat({ name: '第' + pageNo.value + '条' }, { name: '第' + pageNo.value + '条' }, { name: '第' + pageNo.value + '条' }, { name: '第' + pageNo.value + '条' }, { name: '第' + pageNo.value + '条' }, { name: '第' + pageNo.value + '条' })
loadingType.value = isLastPage.value ? 'more' : 'noMore' }, 1000)
} function loadMoreData() { if(loadingType.value === 'loading' || loadingType.value === 'noMore') { //防止重复加载 return; }
pageNo.value ++ loadData() }

>属性配置说明

loadingType 当前状态（more代表可加载更多，noMore代表已是最后一页，loading代表加载中。默认值为more）；
@loadMoreData 加载下一页内容。