H5下拉刷新简单实现

基于jquery的H5页面下拉刷新简单实现：

<style>
    #refresh {
        display: none;
        position: relative;
        margin-bottom: 5px;
        color: red;
    }
</style>

<div id='refresh'>↓ 刷新页面...</div>

<script>
    // 下拉刷新页面
    var startY, endY, distance
    var doc = document.documentElement || document.body;
    $(doc).on('touchstart', function (e) {
        var e = e || window.e
        startY = e.touches[0].clientY
    })
    $(doc).on('touchmove', function (e) {
        var e = e || window.e
        endY = e.touches[0].clientY;
        distance = endY - startY
        if (distance >= 150) {
            $('#refresh').css({ 'display': 'block' });
        } else {
            $('#refresh').css({ 'display': 'none' });
        }
    });
    $(doc).on('touchend', function () {
        if (distance >= 150) {
            window.location.reload();
        }
    });
</script>