上拉刷新 下拉加载更多

（一）

window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    if (scrollTop + windowHeight == scrollHeight) {
        console.log('触底加载更多');
    }
}

整体代码：
CSS

<style>
        #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;
        }
</style>

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)';
            }
        }, 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 () {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            if (scrollTop + windowHeight == scrollHeight) {
                console.log('触底加载更多')
            }
        }
    };
    window.upDownRefresh = upDownRefresh;
})(window, document);
new upDownRefresh("refreshContainer", ".refreshText")

（二）之前做小程序项目的时候也有涉及到上拉刷新、下滑加载的内容，小程序内部提供相应的方法，只需要在内部编写我们需要加载的内容即可，方法也比较好用。
（1）监听用户下拉刷新：

onPullDownRefresh: function () {
    console.log('上拉刷新');
},

注意下拉的动作，需要同步在对应的json文件中去定义，否则单js文件内设置并不会生效：

"enablePullDownRefresh":true

（2）页面上拉触底事件的处理函数：

onReachBottom: function () {
    console.log('触底加载更多');
}