iView无限滚动Scroll组件

发表于 | 分类于 | | 阅读次数:
字数统计: 267 字 | 阅读时长 ≈ 1 分钟

一般来说，数据量太大时使用分页。但由于某些第三方因素无法使用分页时，可以使用无限滚动来展示数据，避免数据量太大时的渲染延迟。

1
2
3
4
5
<Scroll :on-reach-bottom="handleReachBottom">
  <CheckboxGroup v-model="chooseSearchProject" style="display:flex;flex-direction:column;">
    <Checkbox :label="item.id" v-for="(item,index) in list1" :key="index">{{item.pName}}</Checkbox>
  </CheckboxGroup>
</Scroll>

data:

1
2
3
chooseSearchProject: [], // 搜索项目中选中的项id
searchProjectList: [], // 搜索项目中的全部待选项
list1: [] // 已渲染的项目

初始时，若数据量大于100条，则只展示100条

created:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.$api['schoolManage/findRelatedItems']({
  marketArea: this.searchData.marketRegion,
  pName: this.searchData.projectName
}).then(data => {
  this.searchProjectList = data;
  // this.allDataList = data;
  if (data.length > 100) {
    for (let i = 0; i < 100; i++) {
      this.list1.push(data[i]);
    }
  } else {
    this.list1 = data;
  }
});
},

下拉触底时，需返回 Promise

methods:

1
2
3
4
5
6
7
8
9
10
11
12
handleReachBottom() {
  return new Promise(resolve => {
    setTimeout(() => {
      const lastIndex = this.list1.length;
      const allLength = this.searchProjectList.length;
      for (let i = lastIndex; i < lastIndex + 100 && i < allLength - 1; i++) {
        this.list1.push(this.searchProjectList[i]);
      }
      resolve();
    }, 1000);
  });
},