zoukankan      html  css  js  c++  java
  • vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据)

    1:钩子函数监听滚动事件:

      mounted () {
        this.$nextTick(function () {
          window.addEventListener('scroll', this.onScroll)
        })
      },

    2:

     methods: {
        // 获取滚动条当前的位置
        getScrollTop () {
          var scrollTop = 0
          if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop
          } else if (document.body) {
            scrollTop = document.body.scrollTop
          }
          return scrollTop
        },
        // 获取当前可视范围的高度
        getClientHeight () {
          var clientHeight = 0
          if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
          } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
          }
          return clientHeight
        },
    
        // 获取文档完整的高度
        getScrollHeight () {
          return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
        },
        // 滚动事件触发下拉加载
        onScroll () {
          if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 0) {
            if (this.status === 1) {
              this.status = 0
              // 页码,分页用,默认第一页
              this.deliverParams.page += 1
              // 调用请求函数
              alert('触发!!!')
            }
          }
        },
    }
  • 相关阅读:
    SQL优化
    Mybatis
    Spring MVC(总结二)
    ES多机集群配置
    ES索引,分片,一致性
    ElasticSearch关于索引库的命令操作
    试题01(一)
    Linux安装配置elastic search
    Windows安装配置elastic search
    SpringBoot(二)
  • 原文地址:https://www.cnblogs.com/dw3306/p/10298279.html
Copyright © 2011-2022 走看看