angular 监听 Windows 滚动事件 实现页面滚动加载

方案一#

使用 render2 的 listen 方法进行监听,之前这样做,问题是,监听事件触发后,在其他组件中触发 window 的滚动

 this.renderer2.listen('window', 'scroll', () => {
            console.log('scroll');
        });

方案二#

  //监听滚动,加载数据
    @HostListener('window:scroll', ['$event']) public onScroll = ($event) => {

        //客户端高度
        var clientH = document.documentElement.clientHeight;
        //body高度
        var bodyH = document.body.clientHeight;

        //滚动的高度
        var scrollTop = document.documentElement.scrollTop;
        console.log(bodyH)
        //滚动到底部60以内
        if (bodyH - clientH - scrollTop < 80) {
            if (!this.flag) {
                console.log('翻页');
                //翻页
                this.changePage('+');
            }
            this.flag = true;
        } else {
            this.flag = false;
        }
    }

设置 flag 的目的是避免在滚动的过程中重复加载数据,到达只加载一次的目的

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。