移动端实现页面滚动到下面,自动加载更多

发布时间 2023-03-29 20:49:49作者: 倍姬存希

css 代码

.box{
    width: 500px;
    height: 500px;
    overflow-y:auto;
}


html

<div class="box" ref="box">
    <!--列表内容放在这里-->
    <!--列表内容如果一次加载不完,一定要保证初次加载时的列表总高度超过box的高度,否则不会产生滚动条-->
</div>

js

mounted() {
    let box = this.$refs.box;
    box.addEventListener('scroll',this.handleScroll,true);
 },
methods: {
    handleScroll(e){
        //变量scrollTop是滚动条滚动时,距离顶部的距离
        var scrollTop = e.target.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = e.target.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = e.target.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop + windowHeight == scrollHeight){
            //写后台加载数据的函数
            console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
        }
    },
}