h5分页加载的实现_h5分页插件-CSDN博客

本文链接：https://blog.csdn.net/u013262823/article/details/104840825

本文介绍了如何在h5中实现分页加载功能，通过监听滚动事件，在接近底部时请求接口数据，将返回内容与现有数据合并。详细讲解了scrollTop、innerHeight和scrollHeight的计算方法，并给出了html和js的实现代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

h5分页加载功能的实现

项目场景涉及到分页加载，之前文章有用过使用better-scroll 这个插件在进行处理（文章具体地址：https://blog.csdn.net/u013262823/article/details/91979851），今天我们使用滚动的方式来实现分页加载的功能，比起使用better-scroll更简单易懂，我们先介绍一下实现的大致原理：
1、监听滚动事件，滚动到距离底部一定距离的时候去请求接口数据（指定距离可以自己去设置）
2、接口返回数据与先前请求数据合并
3、接口请求后去判断是否还存在未加载完数据

scrollTop、innerHeight、scrollHeight的计算

我们认为当满足scrollHeight = innerHeight + scrollTop，说明已经到达底部。scrollTop代表了滚动条滚动的长度（如果想让元素快速回到顶部，则可设置scrollTop=0），innerHeight代表了窗口文档显示区的高度，scrollHeight 代表了滚动元素的高度

功能代码实现

html代码部分

<div class="msg-container" ref="notice" @scroll.passive="onScroll">
            <ul class="msg-list" :class="{line: signList.length > 0}">
                <v-message-card v-for="(item, index) in signList"
                                :message="item"
                                :key="index">
                    <p v-if="item.dayBar.show" class="title fz20" slot="">{
   
   {
   
   item.dayBar.text}}</p>
                </v-message-card>
            </ul>
            <div class="c-9 t-c fz14" :style="{marginBottom: isIphoneX ? '45px' : '10px'}" v-