Framework7 - Aktualisieren
Beschreibung
Es ist eine spezielle Komponente, mit der der Seiteninhalt durch Ziehen aktualisiert (neu geladen) wird.
Der folgende Code zeigt, wie der Seiteninhalt aktualisiert wird:
<div class = "page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
<!-- Default pull to refresh layer-->
<div class = "pull-to-refresh-layer">
<div class = "preloader"></div>
<div class = "pull-to-refresh-arrow"></div>
</div>
<!-- usual content below -->
<div class = "list-block">
...
</div>
</div>Die folgenden Klassen werden beim Aktualisieren verwendet -
page-content- Es verfügt über eine zusätzliche Pull-to-Refresh-Inhaltsklasse , die erforderlich ist, damit das Pull aktualisiert werden kann.
pull-to-refresh-layer- Es handelt sich um eine verborgene Ebene, die zum Aktualisieren des visuellen Elements verwendet wird. Es handelt sich lediglich um einen Preloader und einen Pfeil.
data-ptr-distance = "55" - Dies ist ein zusätzliches Attribut, mit dem Sie die benutzerdefinierte Triggerentfernung "Pull to Refresh" festlegen können. Der Standardwert ist 44px.
Zum Aktualisieren von Ereignissen ziehen
In 'Zum Aktualisieren ziehen' gibt es einige JavaScript-Ereignisse, die in der folgenden Tabelle aufgeführt sind:
| S.No. | Eventbeschreibung | Ziel |
|---|---|---|
| 1 | pullstart Es wird ausgelöst, wenn Sie mit dem Ziehen beginnen, um Inhalte zu aktualisieren. |
Zum Aktualisieren von Inhalten ziehen. |
| 2 | pullmove Es wird ausgelöst, wenn Sie ziehen, um Inhalte zu aktualisieren. |
Zum Aktualisieren von Inhalten ziehen. |
| 3 | pullend Es wird ausgelöst, wenn Sie Pull loslassen, um Inhalte zu aktualisieren. |
Zum Aktualisieren von Inhalten ziehen. |
| 4 | refresh Dieses Ereignis wird ausgelöst, wenn der zu aktualisierende Pull in den Status "Aktualisieren" wechselt . |
Zum Aktualisieren von Inhalten ziehen. |
| 5 | refreshdone Es wird ausgelöst, nachdem es aktualisiert wurde und in den Ausgangszustand zurückkehrt. Dies erfolgt nach dem Aufruf der pullToRefreshDone- Methode. |
Zum Aktualisieren von Inhalten ziehen. |
Es gibt App-Methoden, die mit Pull to Refresh verwendet werden können.
| S.No. | Methoden und Beschreibung der App |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) Es wird verwendet, um Pull-to-Refresh- Inhalte zurückzusetzen. |
| 2 | myApp.pullToRefreshTrigger(ptrContent) Es wird zum Auslösen einer Aktualisierung bei angegebenem Pull ausgelöst , um den Inhalt zu aktualisieren . |
| 3 | myApp.destroyPullToRefresh(ptrContent) Es wird verwendet, um Pull zu zerstören / zu deaktivieren , um bei angegebenem Pull zu aktualisieren, um Inhalte zu aktualisieren . |
| 4 | myApp.initPullToRefresh(ptrContent) Es wird verwendet, um Pull zu initialisieren / zu aktivieren , um Inhalte zu aktualisieren . |
Wobei ptrContent für HTMLElement oder String zum Abrufen von Aktualisierungsinhalten zum Zurücksetzen / Auslösen oder Deaktivieren / Aktivieren verwendet wird.
Beispiel
Das folgende Beispiel zeigt die Verwendung einer Aktualisierungskomponente, die die Aktualisierung eines Seiteninhalts initiiert.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Pull To Refresh</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Pull To Refresh</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">apple</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">strawberry</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Mango</div>
</div>
</div>
</li>
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Dummy Content
var fruits = ['mango', 'orange', 'watermelon', 'banana'];
// Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
// Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + fruit + '</div>' +
'</div>' + '</div>' + '</li>';
// Prepend new list element
ptrContent.find('ul').prepend(itemHTML);
// When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
</script>
</html>Ausgabe
Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:
Speichern Sie den oben angegebenen HTML-Code als pull_to_refresh.html Datei in Ihrem Server-Stammordner.
Öffnen Sie diese HTML-Datei als http: //localhost/pull_to_refresh.html und die Ausgabe wird wie unten gezeigt angezeigt.
Wenn der Benutzer nach unten zieht, wird die Seite mit dem Inhalt aktualisiert.