滚动条实现分页加载

<div :data="data" v-loading="loading" v-if="data.length" class="table-container-content" @scroll="scrollTo">
  <template v-for="(item ,index) in data" >
    <card :item="item" :key="index" :i="index" @refresh="changeTable(...arguments,item)"></card>
  </template>
  <div v-if="loadingFlag" style="text-align: center;padding-bottom: 10px;">正在加载中...</div>
  <div v-else-if="noMoreFlag" style="text-align: center;padding-bottom: 10px;">没有更多数据</div>
</div>

methods: {

scrollTo() {
  const dom = document.querySelector('.table-container-content')
  // 判定元素是否滚动到底：
  const pages = this.total % this.pageSize !== 0 ? (this.total / this.pageSize) + 1 : this.total / this.pageSize
  if (dom && (dom.scrollHeight - dom.scrollTop === dom.clientHeight)) {
    this.pageIndex++
    if (this.pageIndex > Math.floor(pages)) {
      this.noMoreFlag = true
      return
    }
    this.getList()
  }
},

// 向上, 置顶
toUp() {
  const dom = document.querySelector('.table-container-content')
  if (dom && (dom.scrollTop === 0)) return
  dom && dom.scrollTo({ top: 0, behavior: 'smooth' })
}

}