简单代码实现H5下拉刷新和触底加载更多

首先说一下实现原理：
下拉刷新
实现下拉刷新主要分为三步：
监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置。
触底加载更多
当网页向上卷曲出去的高度+浏览器高度=网页正文高度的时候，判定为网页已经触底。

下面直接上代码
CSS代码

#refreshContainer li {
    background-color: #eee;
    margin-bottom: 1px;
    padding: 20px 10px;
}
.refreshText {
    position: absolute;
    width: 100%;
    line-height: 50px;
    text-align: center;
    left: 0;
    top: 0;
}

HTML代码

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

JS代码

(function (window, document, undefined) {
    var upDownRefresh = function (box, text) {
        var _element = document.getElementById(box),
            _refreshText = document.querySelector(text),
            _startPos = 0,
            _transitionHeight = 0;
        _element.addEventListener('touchstart', function (e) {
            console.log('初始位置：', e.touches[0].pageY);
            _startPos = e.touches[0].pageY;
            _element.style.position = 'relative';
            _element.style.transition = 'transform 0s';
        }, false);
        _element.addEventListener('touchmove', function (e) {
            // console.log('当前位置：', e.touches[0].pageY);
            _transitionHeight = e.touches[0].pageY - _startPos;
            console.log(_transitionHeight)
            if (_transitionHeight > 0 && _transitionHeight < 60) {
                _refreshText.innerText = '下拉刷新';
                _element.style.transform = 'translateY(' + _transitionHeight + 'px)';
                if (_transitionHeight > 55) {
                    _refreshText.innerText = '释放更新';
                }
            }
        }, false);
        _element.addEventListener('touchend', function (e) {
            if (_transitionHeight > 55) {
                _refreshText.innerText = '更新中...';
                console.log("触发更新")
            }
            _element.style.transition = 'transform 0.5s ease 1s';
            _element.style.transform = 'translateY(0px)';
        }, false);
        window.onscroll = function () {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            if (scrollTop + windowHeight == scrollHeight) {
                console.log('触底加载更多')
            }
        }
    }
    window.upDownRefresh = upDownRefresh;
})(window, document);
new upDownRefresh("refreshContainer", ".refreshText")