Der Code ist sehr einfach, aber die implementierten Funktionen sind sehr praktisch. Präsentieren Sie einfach den Code
CSS:
Die Codekopie lautet wie folgt:
<meta charset = "utf-8" />
<title> Pull to aktualisieren </title>
<meta name = "viewPort" content = "width = Gerätebidth, Höhe = Gerätehöhe, Initalskala = 1,0, Maximal-Scale = 1,0, Benutzer-scalable = no;" />
<Styles>
div {
Position: absolut;
Oben: 0px;
unten: 0px;
Breite: 100%;
links: 0px;
Überlauf: versteckt;
}
li {
Typ-Typ-Typ: Keine;
Höhe: 35px;
Hintergrund: #CCC;
Border-Bottom: Solid 1px #fff;
Text-Align: links;
Zeilenhöhe: 35px;
Padding-Links: 15px;
}
ul {
Breite: 100%;
Rand: 0px;
Position: absolut;
links: 0px;
Polsterung: 0px;
Oben: 0px;
}
</style>
HTML:
Die Codekopie lautet wie folgt:
<div>
<ul class = 'scrollen'>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 6 </li>
<li> 7 </li>
<li> 8 </li>
<li> 9 </li>
<li> 10 </li>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 6 </li>
<li> 7 </li>
<li> 8 </li>
<li> 9 </li>
<li> 10 </li>
</ul>
</div>
<Script>
var scroll = document.querySelector ('. Scroll');
var outerscroller = document.querySelector ('. oberscroller');
var touchstart = 0;
var touchdis = 0;
oberscroller.addeventListener ('touchStart', function (event) {
var touch = event.targettouches [0];
// Setzen Sie das Element, wo Ihr Finger ist
TouchStart = Touch.pagey;
console.log (taststart);
}, FALSCH);
oberscroller.addeventListener ('TouchMove', Funktion (Ereignis) {
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;
}, FALSCH);
oberscroller.addeventListener ('Touchend', Funktion (Ereignis) {
TouchStart = 0;
var top = scroll.offsettop;
console.log (top);
if (ober> 70) refresh ();
if (top> 0) {
var time = setInterval (function () {
scroll.style.top = scroll.offsettop -2+'px';
if (scroll.offsettop <= 0) ClearInterval (Zeit);
}, 1)
}
}, FALSCH);
Funktion refresh () {
für (var i = 10; i> 0; i--)
{
var node = document.createelement ("li");
node.innerhtml = "Ich bin neu";
scroll.insertBefore (Knoten, Scroll.Firstchild);
}
}
</script>
Das obige dreht sich alles um diesen Artikel. Ich hoffe, es wird für alle hilfreich sein, JavaScript zu lernen.