介绍

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

组件使用

安装

npm install --save jx-vue2-load-more

使用

<template>
  <div id="app">
    <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>
  </div>
</template>
<script>
 import loadMore from 'jx-vue2-load-more'; 
 export default {
  name: 'App', 
  data() {
    return { 
      list: [],
      loadingType: 'more',
      pageNo: 1, // 当前页数
      isLastPage: 5 //总页数
    }
  },
  components: {
    loadMore
  },
  mounted() {
    this.loadData() 
  },
  methods: {
    loadData() {
      this.loadingType = 'loading'
       setTimeout(() => {
          this.list = this.list.concat([{ 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }])  
          this.loadingType =  (this.pageNo < this.isLastPage) ? 'more' : 'noMore'
       }, 1000)  
    },
		loadMoreData() {
      if(this.loadingType === 'loading' || this.loadingType === 'noMore') {
					//防止重复加载
					return;
      }   
      this.pageNo ++
      this.loadData() 
		}  
  } 
 }
</script>
<style> 
.item {
  line-height: 200px;
}
</style>

属性配置说明

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