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

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

猜你喜欢

转载自blog.csdn.net/ttn456456/article/details/79947065