列表滚动底部加载下一页
npm install vue-infinite-scroll
html部分
<div class="list"v-infinite-scroll="loadMore"infinite-scroll-disabled="busy"infinite-scroll-distance="10"><div:class="['item', item.id === currentPersonId ? 'active' : '']"@click="handleSelectPerson(item)"v-for="item in peronList":key="item.id">{{ item.name }} <span class="address">{{ item.pageviews }}</span></div></div>
js代码
//获取人员列表
async getCustomerList(params) {this.busy = true;const res = await getCustomerList(params);this.peronList = this.peronList.concat(res.data.customerList || []);this.total = res.data.page.total;this.page.current++;this.busy = false;
},
async loadMore() {if (this.peronList.length < this.total) {this.getCustomerList({ page: this.page });}
},
onRefresh() {this.peronList = [];this.page.current = 1;this.getCustomerList({ page: this.page });
},