Js滚动条到底底部加载更多

傷城~ 2022-12-27 08:45 189阅读 0赞

[https://blog.csdn.net/qq\_40816649/article/details/86512538][https_blog.csdn.net_qq_40816649_article_details_86512538]  
链接：https://zhuanlan.zhihu.com/p/335058248

这次在做vue移动端的项目时有一个场景是列表上拉加载数据，这种情况肯定是在mounted中给window加上一个滚动监听，

记住这里要提前定义好this如果你有用到this的话，因为监听也算是异步操作，没有提前定义的话会报错。

mounted () {
        this.initList()
        var that = this
        window.addEventListener("scroll", function () {
            if(document.body.scrollHeight <= window.screen.height + document.body.scrollTop){
                if (that.noMore) {
                    return
                }
                if (that.initOver) {
                    that.initList()
                }
            }
        })
    },

当页面滚动到底部即程序走到if判断中执行数据请求。

这里我在做项目的过程中有多次用到滚动监听，有意思的是有的地方成功了有的地方失败了。

原因是不同浏览器获取页面滚动距离的方法不一样。

总结了以下三种

(window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)

虽然不知道分别对应什么浏览器但是只要向上面的代码一样直接写上去就ok了，函数会找有值的那个进行计算。

这里我们要封装一下滚动到底部触发的方法。在method中

mounted() {
        this.init(0)
        var that = this
        window.addEventListener("scroll", that.scroll)
    },
    
    methods: {
        scroll: function () {
            var that = this
            if (document.body.scrollHeight <= window.screen.height + document.body.scrollTop) {
                if (that.noMore) {
                    return
                }
                if (that.initOver) {
                    that.init(2)
                }
            }
        },
    }

**还有**

在你从列表页跳转到写一页的时候，上一个列表页的页面滚动监听事件还是存在的，当你在下一个页面拉到底部的时候还会继续监听上一个页面的滚动监听。

那么既然在离开页面后依然存在那我们就在离开的时候这个监听事件去掉就行了。

在beforeDestroy中通过个removeEventListener这个方法去掉

beforeDestroy(){
        var that = this
        window.removeEventListener('scroll', that.scroll);//监听页面滚动事件
    },

window.addEventListener("scroll", function () {
    var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
    //clientHeight是网页在浏览器中的可视高度，
    var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
    //scrollTop是浏览器滚动条的top位置，
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容；
    if (parseInt(scrollTop) + parseInt(clientHeight) >= parseInt(htmlHeight)) {
    		console.log("加载");
    	}
    })

加parseInt 是移动端可能会出现小数点，在电脑上模拟一般看不出，但是app 与移动端会出现小数点所以最好转换一下，当然也可以将直接写成>=也可以

如果用vue 要将$(window).scroll(function() \{\}） 改为$(window).scroll(()=> \{\}）

[https_blog.csdn.net_qq_40816649_article_details_86512538]: https://blog.csdn.net/qq_40816649/article/details/86512538