首頁 > web前端 > js教程 > 純javascript實作簡單下拉刷新功能_javascript技巧

純javascript實作簡單下拉刷新功能_javascript技巧

WBOY
發布: 2016-05-16 16:09:42
原創
1142 人瀏覽過

程式碼很簡單,實現的功能卻很實用,直接奉上程式碼

CSS:

複製程式碼 程式碼如下:


Pull to Refresh


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;
        touchThis = 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能夠有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板