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('触发!!!')
            }
          }
        },
    }
  • 相关阅读:
    使用JS对中文字符串进行utf8的Base64编码
    subprocess理解
    25组新鲜出炉的有用图标集
    jQuery UI 1.8.9 发布
    正则匹配拼音
    jQuery Mobile 教程 (1)
    10款精选的用于构建良好易用性网站的jQuery插件
    Html 5 video/audio 格式转换 ogg
    10个有用的jquery 图片插件
    asp.net MVC 权限设计(续)
  • 原文地址:https://www.cnblogs.com/dw3306/p/10298279.html
Copyright © 2011-2022 走看看