Vue监听滚动加载

最新推荐文章于 2025-01-14 17:01:02 发布

sunddy_x

最新推荐文章于 2025-01-14 17:01:02 发布

阅读量484

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/sunddy_x/article/details/119305355

版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

前言

在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;
}