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>