vue上拉加载

最新推荐文章于 2023-10-12 10:09:57 发布

鲸落鹿林

最新推荐文章于 2023-10-12 10:09:57 发布

阅读量234

点赞数

分类专栏：日常记录文章标签： vue

本文链接：https://blog.csdn.net/weixin_45481771/article/details/104017938

版权

日常记录专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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
  }