vue项目滚动监听跳坑记录

vue项目滚动监听跳坑记录

最近在使用vue写后台管理系统,需要做下拉加载数据的功能，所以使用了js的addEventListener监听页面滚动，代码如下：

  scrol() {
    const dom = document.documentElement || document.body
    this.absTop = dom.scrollTop
    console.log('scrol:' + this.absTop)
  },
  handleScroll() {
      this.scrol()
      const dom = document.documentElement || document.body
      // html 可视区域高度
      const domclientH = document.documentElement.clientHeight || document.body.clientHeight
      // 滚动过的距离
      const sTop = dom.scrollTop
      // html 总高度，包括滚动的部分  dom.scrollHeight
      const sH = dom.scrollHeight
      const chazhi = sH - domclientH - sTop
      // 判断是否触底,之所以小于2而不是0，是因为有些电脑分辨率，会偏小，出现小数点后N多位
      if (chazhi <= 2) {
        // 记录触发请求数据是，滚动过的距离
        this.absTop = sTop
        this.loadingTop = true
        this.page++
        // 请求数据
        this.onsubmit()
      }
    }
  },
  mounted() {
  // addEventListener回调函数没有使用匿名函数，是因为匿名函数的监听不能removeEventListener被移除
  // 移除监听  window.removeEventListener('scroll', this.handleScroll)
  // 开启监听页面滚动
    window.addEventListener('scroll', this.handleScroll)
  }

但是在数据渲染完成之后，发现页面会自动滚动到底部，自动重新向后台请求数据，一直陷入死循环，不断加载数据，而不是在数据渲染完成后滚动条不动，手动使滚动条触底，重新触发请求。

解决问题

经过不懈的了解和尝试，在页面数据加载完成之后，滚动条才自动滚动到底部的，所以这里使用的vue 的生命周期updated 来解决，updated 是数据加载完成之后执行，就是在触发滚动的时候记录当前滚动过的距离，然后在updated 中重新设置元素滚动过的距离就可以解决 ，代码如下：

    const dom = document.documentElement || document.body
    if (this.absTop > 0) {
      dom.scrollTop = this.absTop
    }

附 — vue页面的完整滚动监听，加载数据

export default {
  data() {
    return {
      // 记录当前滚动过的距离
      absTop: 0
    }
  },
  methods: {
    scrol() {
      // 开始滚动监听后，读取元素滚动过的距离
      const dom = document.documentElement || document.body
      this.absTop = dom.scrollTop
      console.log('scrol:' + this.absTop)
    },
    handleScroll() {
     // showNo 用来判断是否还有数据，true是没有数据，false是还有数据，需要继续监听滚动，根据项目需求设置
     // if (this.showNo === false) {
        this.scrol()
        const dom = document.documentElement || document.body
        // html 可视区域高度
        const domclientH = document.documentElement.clientHeight || document.body.clientHeight
        // 滚动过的距离
        const sTop = dom.scrollTop
        // html 总高度，包括滚动的部分  dom.scrollHeight
        const sH = dom.scrollHeight
        const chazhi = sH - domclientH - sTop
        console.log(sTop)
        // 判断是否触底
        if (chazhi <= 2) {
        //记录当前滚动过的距离
          this.absTop = sTop
          this.page++
          // 请求数据
          this.onsubmit()
        }
      //}
    }
  },
  updated() {
  	// 消除数据加载完成之后，滚动条自动滚动到页面底部的问题
  	// absTop 是上次滚动过的距离
    const dom = document.documentElement || document.body
    if (this.absTop > 0) {
      dom.scrollTop = this.absTop
    }
  },
  destroyed() {
    // 关闭当前页面时清除滚动监听
    window.removeEventListener('scroll', this.handleScroll)
  },
  mounted() {
    // 页面加载完成后添加滚动监听，并设置滚动条在顶部
    const dom = document.documentElement || document.body
    dom.scrollTop = 0
    window.addEventListener('scroll', this.handleScroll)
  },
  watch: {}
</script>