使用infinite-scroll-disabled在vue中下拉加载数据

最新推荐文章于 2025-07-11 18:37:04 发布

原创最新推荐文章于 2025-07-11 18:37:04 发布 · 9.3k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中利用infinite-scroll-disabled特性实现下拉滚动时加载更多数据的功能，详细讲解了配置和使用步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="80" infinite-scroll-throttle-delay="200">

选项

选项	描述
infinite-scroll-disabled	如果该属性的值为true，则将禁用无限滚动。
infinite-scroll-distance	数字(默认值= 0)——在执行v -infinite- scroll方法之前，元素底部和viewport底部之间的最小距离。
infinite-scroll-immediate-check	布尔值(默认值= true)表示该指令应该在绑定后立即检查。如果可能，内容不够高，不足以填满可滚动的容器。
infinite-scroll-listen-for-event	当事件在Vue实例中发出时，无限滚动将再次检查。
infinite-scroll-throttle-delay	下次检查和这次检查之间的间隔(默认值= 200)

data() {
  return {
    properties: [],
    pageSize: 20,
    page: 1,
    busy: false,
  };
},

computed: {
  propertiesState() {
    return this.$store.state.property.filterData;
  },
},
watch: {
  propertiesState() {
    this.page = 1;
    this.properties = [];
    this.loadMore();
  },
},

async getProperty() {
  const filterData = this.$store.state.property.filterData;
  filterData.limit = this.pageSize;
  filterData.offset = (this.page - 1) * 20;
  await this.getPropertyList(filterData);
  const list = this.$store.state.property.propertyList;
  return list;
},
loadMore() {
  this.busy = true;
  this.getProperty().then((res) => {
    if (res.length === 0) {
      this.busy = true;
    } else {
      this.properties.push(res);
      this.busy = false;
    }
    this.page += 1;
  });
},