vue项目中引用 下拉加载 v-infinite-scroll懒惰加载

vue项目中引用 下拉加载 v-infinite-scroll懒惰加载

• 安装

npm i vue-infinite-scroll -D

• vue项目中引用 在main.js入口文件里面引入

import infiniteScroll from ‘vue-infinite-scroll’
Vue.use(infiniteScroll)

• 使用 在滚动条所在元素最后方添加

<div 
  v-infinite-scroll="loadMore" 
  infinite-scroll-disabled="busy" 
  infinite-scroll-distance="10">
  可以为加载中提示语或加载中图片
</div>

例：

<div class="scroll">
    <div class="content">
        ......
    </div>
    <div 
      v-infinite-scroll="loadMore" 
      infinite-scroll-disabled="disabled" 
      infinite-scroll-distance="10">
      可以为加载中提示语或加载中图片
    </div>
    <p v-if="loading" class="loading"><span></span></p>
    <p v-if="noMore" class="noMore">已加载全部匹配的结果</p>
</div>
 
export defalut({
    data() {
        return {
       		count: 1, // 起始页数值为0
            loading: false,
            page: 1
        }
    },
    computed: {
    noMore () {
      // 当起始页数大于总页数时停止加载
      return this.count >= this.totalPages
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
    methods: {
        loadMore() {
	        setTimeout(() => {
	        this.loading = true
	        this.count += 1 // 页数+1
	        const params = { enterpriseName: this.state, current: 		this.count, size: 10 }
	        this.common(params) // 调用接口，此时页数+1，查询下一页数据
	        }, 2000)
        }
        common (params) {
	      getEnterpriseListByName(params).then(res => {
	        this.tableData = this.tableData.concat(res.records) // 因为每次后端返回的都是数组，所以这边把数组拼接到一起
	        this.totalPages = res.pages
	        this.total = res.total
	        this.loading = false
	      })
    }
    }
})

选项	描述
infinite-scroll-disabled	等于true时代表正在执行加载，这时禁用滚动触发。
infinite-scroll-distance	指定滚动条距离底部多高时触发v-infinite-scroll指向的方法。
infinite-scroll-immediate-check	布尔值(默认值= true)。指令在绑定后立即检查，是否内容高度不足以填充页面容器。
infinite-scroll-listen-for-event	当vue实例触发事件时立即再次检查。
infinite-scroll-throttle-delay	两次检查之间的时间间隔(默认值= 200)。