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