[JavaScript知识库]Vue监听滚动加载

前言

在PC端，请求数据过多一般采用分页处理，在移动端，则一般使用滚动加载，通过监听元素滚动触底触发加载事件。

用法

// template
<div class="box" @scroll="onScroll">
    <div class="box2"></div>
</div>
// script
methods: {
    onScroll(e) {
        if (e.srcElement.scrollTop + e.srcElement.offsetHeight + 50 >= e.srcElement.scrollHeight) {
            // 距离元素底部50px时触发
        }
    }
}
// style
.box {
    width: 300px;
    height: 400px;
    border: 1px solid #999;
    overflow: auto;
}

.box2 {
    width: 270px;
    height: 600px;
    border: 1px solid red;
    margin: 10px;
}

scrollTop 元素(box2)滚动后与容器顶部的距离
offsetHeight 容器高度(box)
scrollHeight 元素(box2)高度