关于vue滚动到底部刷新数据

囿于江湖

已于 2022-11-03 11:09:28 修改

阅读量2.7k

点赞数

文章标签： javascript vue.js 前端

于 2021-11-30 16:45:19 首次发布

本文链接：https://blog.csdn.net/dongheng123/article/details/121636867

版权

  mounted() {
    this.getTreeLists(this.type, this.id, 'echart');
    this.dom = document.querySelector('.el-table__body-wrapper')
    this.dom.addEventListener('scroll', () => {
      // 滚动距离
      console.log(12312)
      const scrollTop = this.dom.scrollTop
      // 变量windowHeight是可视区的高度
      const windowHeight = this.dom.clientHeight || this.dom.clientHeight
      // 变量scrollHeight是滚动条的总高度
      const scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
      console.log(scrollTop + windowHeight + 20)
      console.log(scrollHeight)
      if (scrollTop + windowHeight + 20 > scrollHeight && this.loadingMore) {
        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
        this.getDataMy()
        //防止重复请求数据
        this.loadingMore = false
        console.log('scrollTop', scrollTop + 'windowHeight', windowHeight + 'scrollHeight', scrollHeight)
      }
    })
  },
   getData() {
      if (this.current * 10 > this.totalCount) {
        return
      }
      this.pageSize = 10
      this.current++
      this.getList()
    },
    getList() {
      const params = {
        size: this.pageSize,
        current: this.current,
        tenantName: this.tenantName
      };
      this.$post(api.getPermissionTypeVOs, params).then(res => {
        this.loadingMore = true
        if(res.code === 0) {
          this.nameList = this.nameList.concat(res.data.records)
          this.totalCount = res.data.totalCount
        }
      })
    },