列表滚动底部加载下一页

最新推荐文章于 2023-05-23 11:09:37 发布

年年CODE

最新推荐文章于 2023-05-23 11:09:37 发布

阅读量529

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_38743783/article/details/128490639

版权

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 });
},