原生js监听滚动条滚动到底部,实现上拉刷新效果

1,629 阅读1分钟

自己现在做的项目

页面渲染数据列表时需要实现上拉加载下一页的数据,没有找到更好的方法,就利用了原生js监听滚动条的滚动事件实现了。

created(){
    window.onscroll = () => {
        // 变量scrollTop 是滚动条滚动时距离顶部的距离
        var scrollTop = document.documentElement.scollTop || document.body.scrollTop;
        // 变量windowHeight 是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // 变量scrollHeight 是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        // 滚动条到底部的条件
        if(scrollTop + windowHeight == scrollHeight){
            if( this.currentList.length <10 ){ // 如果当前获取到的数据列表长度小于10则不用再请求
                return
            }
        }eles{ // 继续请求数据
            this.pageNumber++ 
            this.refresh()
        }
    }
}