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

本文主要是介绍如何实现上拉加载，下拉刷新，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上拉加载，下拉刷新这两种交互，经常出现在移动端中，本质上和PC网页的分页一样，只是交互形式不同而已。

开源社区中有很多的方案，比如：isscroll、better-scroll、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表示向下拉动，并且借助css的translateY属性，让元素跟随手势向下滑动对应的差值，同时也设置一个允许滑动的最大差值；
• 监听touchend事件，如果这时候元素滑动达到最大值，那就触发Callback，同时将translateY重置为0，元素回到初始位置。

HTML代码如下：

  <main><p class="refreshText"></p><ul id="refreshContainer"><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li>...</ul></main>

监听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);

这三个事件就是从下拉到松手的过程：

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

在实际的开发中，更多可能会使用第三方库，这样减少很多的工作量，如果自己封装的话，还得考虑兼容性，易用性和性能等等。

这篇关于如何实现上拉加载，下拉刷新的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---