angular 監聽 Windows 滾動事件 實現頁面滾動載入

phpdi發表於2018-11-14
AngularWindows事件

方案一

使用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 協議》，轉載必須註明作者和本文連結

相關文章