大家好,我是yangyang.最近在弄h5网页(因为是二开,并没有使用uniapp、mintui、mui等移动端框架),做列表的时候需要实现上拉加载，下拉刷新.因此也查询总结了部分经验来分享给大家

介绍

下拉刷新和上拉加载这两种交互方式通常出现在移动端中,其本质是PC网页中的分页类似，只是交互形式不同,开源社区有很多优秀的解决方案:better-scroll、iscroll、pulltorefresh.js...

原理

上拉加载

上拉加载的本质是页面触底，或者快要触底时的动作

判断页面触底我们需要先了解一下下面几个属性

scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值
clientHeight:它是一个定值，表示屏幕可视区域的高度；
scrollHeight：页面不能滚动时也是存在的,此时scrollHeight等于clientHeight。scrollHeight表示body所有元素的总长度(包括body元素自身的padding)

综上我们得出一个触底公式：scrollTop + clientHeight >= scrollHeight

例子:

let clientHeight  = document.documentElement.clientHeight; //浏览器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;
 
let distance = 50;  //距离视窗还用50的时候，开始触发；

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("开始加载数据");
}

下拉刷新

下拉刷新的本质是页面本身置于顶部时，用户下拉时需要触发的动作

关于下拉刷新的原生实现，主要分成三步：

监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置

例子：

Html结构如下

监听touchstart事件，记录初始的值

var _element = document.getElementById('refreshContainer'),
    _refreshText = document.querySelector('.refreshText'),
    _startPos = 0,  // 初始的值
    _transitionHeight = 0; // 移动的距离

_element.addEventListener('touchstart', function(e) {
    _startPos = e.touches[0].pageY; // 记录初始位置
    _element.style.position = 'relative';
    _element.style.transition = 'transform 0s';
}, false);

监听touchmove移动事件，记录滑动差值

_element.addEventListener('touchmove', function(e) {
    // e.touches[0].pageY 当前位置
    _transitionHeight = e.touches[0].pageY - _startPos; // 记录差值

    if (_transitionHeight > 0 && _transitionHeight < 60) { 
        _refreshText.innerText = '下拉刷新'; 
        _element.style.transform = 'translateY('+_transitionHeight+'px)';

        if (_transitionHeight > 55) {
            _refreshText.innerText = '释放更新';
        }
    }                
}, false);

最后，就是监听touchend离开的事件

_element.addEventListener('touchend', function(e) {
    _element.style.transition = 'transform 0.5s ease 1s';
    _element.style.transform = 'translateY(0px)';
    _refreshText.innerText = '更新中...';
    // todo...

}, false);

从上面可以看到，在下拉到松手的过程中，经历了三个阶段：

当前手势滑动位置与初始位置差值大于零时，提示正在进行下拉刷新操作
下拉到一定值时，显示松手释放后的操作提示
下拉到达设定最大值松手时，执行回调，提示正在进行更新操作

扩展一: 使用BetterScroll 2.0完成效果

首先,小编也是使用它完成,BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的,同时betterScroll采用插件结构设计,为此官方也扩展了很多的应用插件,今天我们讨论的两个效果也对应着它两个插件

pulldown:

https://better-scroll.github.io/docs/zh-CN/plugins/pulldown.html

pullup:

https://better-scroll.github.io/docs/zh-CN/plugins/pullup.html

扩展二:IntersectionObserver （交叉观察器）实现触底加载更多

小编在探索的过程中发现了一个intersectionObserver web api, 触发了我的知识盲区,这里也简单安利下大家,后期会单独出一篇,还有就是,如果大家想看动画效果的,可以到b站搜索这个api的名称能找到许多大神的视频动画原理介绍

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

当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

浏览器兼容性

触底加载更多

一个最简单的例子:

const intersectionObserver = new IntersectionObserver((entries) => {
  // 如果 intersectionRatio 为 0，则目标在视野外，
  // 我们不需要做任何事情。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// 开始监听
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

参考网站

https://vue3js.cn/interview/JavaScript/pull_up_loading_pull_down_refresh.html#%E4%B8%80%E3%80%81%E5%89%8D%E8%A8%80
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
https://ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
https://zhuanlan.zhihu.com/p/642926109
https://zhuanlan.zhihu.com/p/635191412

前端:如何实现上拉加载，下拉刷新

介绍

原理