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

js部分: $(function() {    var scroll = document.querySelector('.scrolmain');    var outerScroller = document.querySelector('.main-inner');    var touchstart = 0//    触摸开始   ...

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);
})

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Garmcrypto7undop 0 文章