This article mainly introduces the simple pull-down refresh function of pure javascript, which is very simple and practical without any framework. if you need it, refer to it. The code is very simple, but the implemented functions are very practical.
CSS:
The code is as follows:
Pull to Refresh
HTML:
The code is as follows:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Script
Var scroll = document. querySelector ('. scroll ');
Var outerScroller = document. querySelector ('. outerscroler ');
Var touchStart = 0;
Var touchDis = 0;
OuterScroller. addEventListener ('touchstart', function (event ){
Var touch = event.tar getTouches [0];
// Place the element in the position of the finger
TouchStart = touch. pageY;
Console. log (touchStart );
}, False );
OuterScroller. addEventListener ('touchmove ', function (event ){
Var touch = event.tar getTouches [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;
}, False );
OuterScroller. addEventListener ('touchend', function (event ){
TouchStart = 0;
Var top = scroll. offsetTop;
Console. log (top );
If (top> 70) refresh ();
If (top> 0 ){
Var time = setInterval (function (){
Scroll. style. top = scroll. offsetTop-2 + 'px ';
If (scroll. offsetTop <= 0) clearInterval (time );
}, 1)
}
}, False );
Function refresh (){
For (var I = 10; I> 0; I --)
{
Var node = document. createElement ("li ");
Node. innerHTML = "I'm new ";
Scroll. insertBefore (node, scroll. firstChild );
}
}
Script
The above is all the content in this article. I hope it will be helpful for you to learn javascript.
