移动端H5实现上滑分页加载功能

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

前言

想必掘友们应该都知道，pc 端的上下分页的一般都是通过点击页码来实现的。但在移动端这种方式就不太合适了，移动端一般都是通过向上滑动页面，触底后加载下一页这种方式来实现的。只要后台有源源不断的数据提供，用户可以一直无限向上滑触底加载下页内容，会有种上瘾停不下来的感觉，让用户有更多时间停留在我们的产品上。 本着这个原因，本文就记录一下整过实现过程。

实现过程

思路：要达到触底的条件就是：滚动条的总高度 = 等于可视区的高度+滚动条距离顶部的高度；掘友们应该都知道我们可以通过监听页面的滑动事件来获取这三个值，然后进行一些操作就实现这个功能。

具体实现的代码： 绑定监听的滑动事件函数

<template>
    <div @scroll="pageScroll">
        <!-- 里面是循环遍历的数据 -->
    </div>
</template>

// 页面滚动
pageScroll(e) {
  //变量scrollTop是滚动条滚动时，距离顶部的距离
  var scrollTop = e.target.scrollTop;
  //变量windowHeight是可视区的高度
  var windowHeight = e.target.clientHeight;
  //变量scrollHeight是滚动条的总高度
  var scrollHeight = e.target.scrollHeight;
  //滚动条到底部的条件
  if (scrollTop + windowHeight == scrollHeight) {
    if (this.listData.length < this.total) {
      this.pageNo++
      // 获取下一页的数据
      this.getNextPageData()
    }
  }
}

通过绑定监听滑动事件函数，当页面滑动触底后，根据后端接口提供的数据判断当前页是否小于总页数，如果小于就获取下一页的数据。否则停止触底后下一页数据。

实现效果如下

202206080002-封面.jpg

图片来源：https://juejin.cn/post/6897115352896339976

总结

• 这种方式确实很简单易懂，但也有优化的地方；因为调用后端接口网络请求是异步且有一定的请求时间的，所以我们可以通过封装一个节流函数来控制触底后调后端接口的频率。提高性能。
• 还有页面交互上的优化，比如上滑触底后调后端接口的时间可以在页面底部放一个加载中的一个 loading 动态效果 这篇文章就记录到这了，下次有时间再写一篇用节流函数对 scroll 优化和防抖函数的作用的文章。

写在最后

我是 AndyHu，目前暂时是一枚前端搬砖工程师。

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注呀😊

未经许可禁止转载💌

speak less，do more.