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

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);
        }
    },
}