纯javascript实现简单下拉刷新功能_javascript技巧

代码很简单，实现的功能却很实用，直接奉上代码

CSS：

复制代码 代码如下:

HTML：

复制代码 代码如下:

   

       
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

        
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

   

   var scroll = document.querySelector('.scroll');
   var outerScroller = document.querySelector('.outerScroller');
   var touchStart = 0;
   var touchDis = 0;
   externalScroller.addEventListener('touchstart', function(event) {
        var touch = event.targetTouches[0];
        // 将元素放在手指所在的位置
           touchStart = touch.pageY;
           console.log(touchStart);
        }，假）；
   externalScroller.addEventListener('touchmove', function(event) {
        var touch = event.targetTouches[0];
        console.log(touch.pageY 'px'); 
        scroll.style.top =scroll.offsetTop touch.pageY-touchStart 'px';
        console.log(scroll.style.top);
        touchStart = touch.pageY;
        touchDis = touch.pageY-touchStart;
        }，假）；
   externalScroller.addEventListener('touchend', function(event) {
        touchStart = 0;
        var top = scroll.offsetTop;
        console.log(顶部);
        if(top>70)refresh();
        if(顶部>0){
            var time = setInterval(function(){
              scroll.style.top =scroll.offsetTop -2 'px';
              if(scroll.offsetTop             },1)
        }
    }，假）；
   函数刷新(){
    for(var i = 10;i>0;i--)
        {
            var node = document.createElement("li");
            node.innerHTML = "我是新的";
            scroll.insertBefore(node,scroll.firstChild);
        }
   }

以上就是本文的全部内容了，希望对大家学习javascript能够有所帮助。