vue上拉加载

vue上拉加载

最近项目接触到上拉加载问题，体验到ui库使用列表有抖动现象，体验不是很好，自己实现试试看 自己写的还是有bug 但是体验还可以

  mounted () {
    window.addEventListener('upScroll', this.scroll, false) // 滚轮滚动事件
  },
  methods () {
  	upScroll () {
      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 设备/屏幕高度
      let scrollObj = document.querySelector('.main') // 滚动区域
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let scrollHeight = scrollObj.scrollHeight ? scrollObj.scrollHeight : 0 // 滚动条的总高度
      if (Math.ceil(scrollTop) + clientHeight >= scrollHeight + 1 || Math.ceil(scrollTop) + clientHeight >= scrollHeight - 1 || Math.ceil(scrollTop) + clientHeight >= scrollHeight) {
        if (this.post) { // 控制数据是否全部加载完毕
          this.list() // 请求的数据
          this.post = false  // 这里面加一个false防止重复触发
        }
      }
    }
  },
  list () {
  	// 这边可以写请求的事件 让数据的页数每次请求的时候加一 直到页数等于总页数的时候 
  	this.post = false
  }

如有问题请留言 这边也是第一次写