1、v-infinite-scroll="loadMore"表示回调函数是loadMore
2、infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore,false则执行loadMore,true则不执行,注意,busy表示繁忙,繁忙的时候是不执行的。
3、infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数,10是像素值。一般情况下会在页尾做一个几十像素高的“正在加载中...”,这样的话,可以把这个div的高度设为infinite-scroll-distance的值即可。
4、infinite-scroll-immediate-check 默认值为true,该指令表示,应该在绑定后立即检查busy的值和是否滚动到底。假如你的初始内容高度不够,不足以填满可滚动的容器的话,你应设为true,这样会立即执行一次loadMore,会帮你填充一些初始内容。
5、infinite-scroll-listen-for-event 当事件在Vue实例中发出时,无限滚动将再次检查。
6、infinite-scroll-throttle-delay 检查busy的值的时间间隔,默认值是200,因为vue-infinite-scroll的基础原理是,vue-infinite-scroll会循环检查busy的值,以及是否滚动到底,只有当:busy为false且滚动到底,回调函数才会执行
一直触发 infinite-scroll-disabled="disabledFlag" 根本原因 有一个阈值
看代码
<el-row v-infinite-scroll="getTableList"
:infinite-scroll-distance="2"
:infinite-scroll-disabled="disabledFlag"
style="margin-bottom: 20px;height:calc(90vh - 200px);overflow-y:auto">
<el-col :span="8" v-for="(d,i) in list" :key="i" style="margin:10px 0" >
<div class="list">
<div><i class="el-icon-s-cooperation"></i> {{d.accountNumber}}</div>
<div><i class="el-icon-s-check"></i> {{d.accountName}}</div>
<div>
</div>
</div>
</el-col>
<el-col style="text-align:center;" >
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>
</el-col>
</el-row>
js
// 一开始禁用 不请求数据(会调用多遍请求)
this.disabledFlag = true;
this.searchData.orgCode = this.currentUser?.districtInfo.districtCode;
const res = await Service.pagePayeeAccount(this.searchData);
if(res.code === 0){
// 加载结束
this.loading = false;
if(!(res.data.length)){ return this.noMore = true; }
判断当前的数据 是否小于一页要显示的数据
if(res.data.records.length < this.showTotal){
this.noMore = true;
this.disabledFlag = true;
}else{
// 数据重新获取
this.searchData.pageNum++;
this.disabledFlag = false;
}
// 数据合并
this.list = [...this.list, ...lll];