zoukankan      html  css  js  c++  java
  • VUE 实现监听滚动事件,实现数据懒加载

    methods: {
        // 获取滚动条当前的位置
        getScrollTop() {
            let scrollTop = 0
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop
            } else if (document.body) {
                scrollTop = document.body.scrollTop
            }
            return scrollTop
        },
        // 获取当前可视范围的高度
        getClientHeight() {
            let 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 <= 5) {
                    this.status++;
                    // 调用请求函数
                    this.axios.get('url'
                    ).then(data => {
                        console.log(data)
                    });
                } 
            }
        },
    }

    监听事件

    mounted() {
        this.$nextTick(function () { // 解决视图渲染,数据未更新
            window.addEventListener('scroll', this.onScroll); 
        })
    }
  • 相关阅读:
    清除缓存
    框架更新 (简)
    Xutils简
    动画
    夜间模式
    TabLoaout简单框架
    atomic原子类的理解
    单例模式中指令重排序及需要使用volatile的理解
    对volatile的理解
    jvm内存模型及垃圾回收GC
  • 原文地址:https://www.cnblogs.com/skydragonli/p/11810803.html
Copyright © 2011-2022 走看看