原生js实现下拉刷新,下拉刷新,刷新页面

js部分:

$(function() {
    var scroll = document.querySelector('.scrolmain');
    var outerScroller = document.querySelector('.main-inner');
    var touchstart = 0
//    触摸开始
    outerScroller.addEventListener('touchstart', function(event) {
        var touch = event.targetTouches[0];
        touchstart = touch.pageY
    }, false);
//    手指移动中记录移动位置
    outerScroller.addEventListener('touchmove', function(event) {
        var touch = event.targetTouches[0];
        if(touch.pageY <= 500) {
            outerScroller.style.top = touch.pageY - touchstart + 'px';
        }
    }, false);
//    手指松开回弹
    outerScroller.addEventListener('touchend', function(event) {
        var top = scroll.offsetTop;
        console.log(top)
        if(top > 80) 回调函数;
        if(top > 0) {
            var time = setInterval(function() {
                outerScroller.style.top = outerScroller.offsetTop - 4 + 'px';
                if(outerScroller.offsetTop <= 0) clearInterval(time);
            }, 1)
        }
    }, false);
})

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/313.html