Reines Javascript implementiert einfache Pulldown-Aktualisierungsfunktionen_Javascript-Fähigkeiten

Der Code ist sehr einfach, aber die implementierten Funktionen sind sehr praktisch. Ich werde den Code direkt bereitstellen

CSS:

Code kopieren Der Code lautet wie folgt:

div{
Position: absolut;
top:0px;
unten:0px;
Breite: 100 %;
Links:0px;
Überlauf: versteckt;
}
li{
Listenstiltyp: keiner;
Höhe:35px;
Hintergrund: #ccc;
Rand unten: durchgehend 1 Pixel #fff;
Textausrichtung: links;
Zeilenhöhe: 35px;
​ padding-left:15px;
}
ul{
Breite: 100 %;
​ margin-top:0px;
Position: absolut;
Links:0px;
​ padding:0px;
top:0px;
}

HTML:

Code kopieren Der Code lautet wie folgt:

   

       
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

        
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

   

<script><br>    var scroll = document.querySelector('.scroll');<br>    var äußereScroller = document.querySelector('.outerScroller');<br>    var touchStart = 0;<br>    var touchDis = 0;<br>    äußereScroller.addEventListener('touchstart', function(event) { <br>         var touch = event.targetTouches[0]; <br>         // 把元素放在手指所在的位置 <br>            touchStart = touch.pageY; <br>            console.log(touchStart);<br>         }, false);<br>    äußereScroller.addEventListener('touchmove', function(event) { <br>         var touch = event.targetTouches[0]; <br>         console.log(touch.pageY 'px');  <br>         scroll.style.top = scroll.offsetTop touch.pageY-touchStart 'px';<br>         console.log(scroll.style.top);<br>         touchStart = touch.pageY;<br>         touchDis = touch.pageY-touchStart;<br>         }, false);<br>    äußereScroller.addEventListener('touchend', function(event) { <br>         touchStart = 0;<br>         var top = scroll.offsetTop;<br>         console.log(top);<br>         if(top>70)refresh();<br>         if(top>0){<br>             var time = setInterval(function(){<br>               scroll.style.top = scroll.offsetTop -2 'px';<br>               if(scroll.offsetTop<=0)clearInterval(time);<br />             },1)<br />         }<br />     }, false);<br />    Funktion „refresh()“{<br />     for(var i = 10;i>0;i--)<br>         {<br>             var node = document.createElement("li");<br>             node.innerHTML = "Ich bin neu";<br>             scroll.insertBefore(node,scroll.firstChild);<br>         }<br>    }<br> </script>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die Javascript lernen.