介绍

基于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() 
 } 
</script>
<style> 
.item {
  line-height: 200px;
}
</style>

属性配置说明

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