移動端ドロップダウンリフレッシュヘッド実現原理及びコード実現

    
    
    
    


    

        

        

            
000
            
111
            
222
            
333
            
444
            
555
            
666
            
777
            
888
            
999
        
    
  
 

    window.onload = function () {
        let container = document.querySelector('#refreshContainer');
        let refreshText = document.querySelector('.refreshText');
        let parent = document.querySelector('.parent');
        let startY = 0; //        Y  
        let endY = 0;   //        Y  
        let flag = false; //            
        parent.addEventListener('touchstart', function (e) {
            startY = e.touches[0].pageY;
        });
        parent.addEventListener('touchmove', function (e) {
            if (isTop() && (e.touches[0].pageY - startY) > 50) {
                flag = true;
                document.body.style.overflow='hidden';
                refreshText.style.height = "80px";
                parent.style.transform = "translateY(80px)";
                parent.style.transition = "all ease 0.5s";
                refreshText.innerHTML = "      ...";
            }
        });
        //    
        parent.addEventListener('touchend', function (e) {
            if (isTop() && flag) {
                refreshText.innerHTML = "    ...";
                //      ，     ，      
                setTimeout(function () {
                    parent.style.transform = "translateY(0)";
                    document.body.style.overflow = 'auto';
                }, 2000);
            }
        });
        //scrollTop    
        function isTop() {
            let t = document.documentElement.scrollTop || document.body.scrollTop;
            return t === 0 ? true : false;
        }
    }