页面滚动加载分页

48 阅读1分钟
  mounted () {
    this.getCheckBoxFn()
    this.handleQuery()
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
  },
  destroyed () {
    window.removeEventListener('scroll', this.windowScroll)// 销毁滚动事件
  },
  
  // 删除滚动监听器,建议使用beforeRouteLeave,因为destroyed()钩子在路由跳转时不会触发
  beforeRouteLeave () {
    window.removeEventListener('scroll', this.windowScroll)// 销毁滚动事件
  },
// 查询列表
getList () {
  if (this.loading) return
  this.loading = true
  getFlightList(this.queryParams).then(({ list }) => {
    this.tableData = this.tableData.concat(list)
    this.noMore = list.length < 10
    this.queryParams.pageNum += 1
  }).finally(() => { this.loading = false })
},
// 获取当前可视范围的高度
getCHeight (father, son) {
  const [fatherH, sonH] = [father.clientHeight, son.clientHeight]
  return fatherH && sonH ? Math.min(fatherH, sonH) : Math.max(fatherH, sonH)
},
// 获取文档完整的高度
getSHeight (father, son) {
  return Math.max(father.scrollHeight, son.scrollHeight)
},
// 获取当前滚动条的位置
getSTop (father, son) {
  const [fatherH, sonH] = [father.scrollTop, son.scrollTop]
  return sonH && sonH ? sonH : fatherH
},
windowScroll () {
  const [father, son] = [document.querySelector('.wrap-box-content'), document.querySelector('.wrap-box-content-list')]
  // 获取三个值
  const { getSTop, getCHeight, getSHeight, getList, noMore } = this
  // 如果满足公式则,确实到底了 发送异步请求请求数据,同时携带offset并自增offset noMore是自定义变量,如果是最后一批数据则以后都不加载
  getSTop(father, son) + getCHeight(father, son) === getSHeight(father, son) && !noMore && getList()
},