利用vue进行页面滚动监听,上拉刷新

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1、利用vue进行页面滚动监听,上拉刷新

methods: {
                handleScroll(){
                    let page = document.getElementById('content');
                    // console.log(this.tempScrollTop,page.scrollTop,page.clientHeight,page.scrollTop+page.clientHeight,page.scrollHeight);
                    if(page.scrollTop+page.clientHeight >= page.scrollHeight-25){
                        if(page.scrollTop+page.clientHeight >= page.scrollHeight-5){
                            this.more = '加载中...';
                            this.pageNo ++;
                            fnInitData();
                        } else if(this.tempScrollTop > page.scrollTop){
                            this.more = '';
                        } else {
                            this.more = '上拉加载更多...';
                        }
                        this.tempScrollTop = page.scrollTop;
                    } else {
                        this.more = '';
                        console.log(this.pageNo,this.more);
                    }
                },
            },
            mounted(){
                document.getElementById('content').addEventListener('scroll',this.handleScroll);
            },
            beforeDestroy(){
                document.getElementById('content').removeEventListener('scroll', this.handleScroll);
            }

 

转载于:https://my.oschina.net/u/2365397/blog/3047852

你可能感兴趣的:(利用vue进行页面滚动监听,上拉刷新)