H5下拉刷新分页

原创已于 2024-08-14 19:42:09 修改 · 768 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

于 2024-03-01 17:51:48 首次发布

前端功能效果专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用IntersectionObserverAPI来监听分页列表底部元素与视口的交叉状态，当用户滚动到底部时，动态加载更多数据，提供流畅的用户体验。

对于分页需求，分页数据的请求触发十分重要，监听滑动到底的触发也有很多种。

1.IntersectionObserver监听

IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。

由MDN文档可知，IntersectionObserver可以观察目标元素和父元素可视区域的重叠部分，即可以判断一个元素是否进入可视区域中。
所以可以在分页列表尾部，增加一个占位的被观察元素，当被观察的元素进入父元素可视区域，就是已经滚动到列表容器底部了。同时IntersectionObserver的异步观察可以在需要的时候触发回调执行。
例子：

  <ul class="dataList">
    <button class="bottomnBtn">到底的介绍</button>
  </ul>
    <script>
    //pageSize可以大一点,若初始化第一页没铺满一屏,则不会触发分页
    var page = 1, pageSie = 20;
    const obverseBottn = new IntersectionObserver((entries) => {
      //  intersectionRatio 为 0，则目标在视野外，
      if (entries[0].intersectionRatio <= 0) return;
      getPaginationData()
      page += 1;
    }
    )
    obverseBottn.observe(document.querySelector(".bottomnBtn"));
    function getPaginationData(){
      let fragme = new DocumentFragment();
      let bottomnBtn = document.querySelector(".bottomnBtn")
      for (let i = (page - 1) * pageSie; i < page * pageSie; i++) {
        let li = document.createElement('li');
        li.innerHTML = i;
        fragme.append(li);
      }
      bottomnBtn.parentNode.insertBefore(fragme, bottomnBtn)
    }

  </script>

    .dataList {
      width: 300px;
      height: 800px;
      border: 5px solid black;
      margin: 0 auto;
      overflow-y: scroll;
      list-style: none;
    }

    .dataList li {
      height: 50px;
      background-color: aquamarine;
      margin: 10px 0;
    }

    .bottomnBtn {
      width: 100%;
      height: 50px;
      background-color: transparent;
    }