elementUI

elementUI组件坑点记录

wujiawen 发布于

阅读量

elementUI组件坑点记录

关于无限滚动组件的使用

在渲染之前，要先初始化滚动数据，然后才能调用v-infinite-scroll 绑定的触底方法，调用接口更新滚动数据
否则，若在渲染之前没有数据，就会无限触发触底事件

伪代码展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
data () {
  return {
    hasInit: false, // 记录是否已经初始化数据
    noMore: false // 记录是否已加载所有数据
  }
}

async created () {
  // 初始化滚动数据
  await this.getTasks('init')
  // 已经初始化滚动数据
  this.hasInit = true
},

// 无限滚动绑定的 load 方法 v-infinite-scroll="load"
async load () {
  // 若没有初始化 或已加载所有数据 则返回
  if (!this.hasInit || this.noMore) return
  this.pageNum++
  this.loading = true
  await this.getTasks()
  this.loading = false
}