1、安装vue-infinite-scroll
npm i vue-infinite-scroll -D
2、页面引用
// 滚动加载插件
import infiniteScroll from 'vue-infinite-scroll';
export default {
directives: { infiniteScroll },
data() {
return {
lowerList: [], // 下级报表
busy: false, // 是否滚动加载
req: {
page: 0, // 分页
pageSize: 10, // 条数
}
};
},
}，
methods: {
// 获取下级列表
getData() {
this.busy = true;
this.req.page = ++this.req.page;
lowerReport(this.req).then(response => {
this.busy = false;
this.lowerList = this.lowerList.concat(response.data);
// response 空时候不请求
if (!(0 in response)) {
this.busy = true;
}
});
},
// 滚动加载
pullup() {
if (!this.busy) {
this.getData();
}
},
}
页面引用
<div class="scroller" v-infinite-scroll="pullup" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<-- 需要滚动加载的内容 -->
</div>
