Wenn Sie Projekte durchführen, ist die Pulldown-Refresh-Funktion sehr häufig. Wie implementieren Sie sie also? Im Folgenden wird der Editor Ihnen vorgestellt, wie Sie Ionic verwenden, um die Dropdown-Aktualisierungsfunktion der Seite zu implementieren. Schauen wir uns an!
Für bestimmte Implementierungen finden Sie im folgenden Quellcode:
HTML -Code
Ion-Refresher: Ist das Symbol, das durch Pulldown aktualisiert wird;
Ziehen-Text = "Ziehen Sie Aktualisieren". Die Fragen hier können nach Belieben ersetzt werden, genau wie es;
On-refresh = "doreFresh ()" Dies ist die Methode, die wir beim Herunterziehen ausführen müssen. Hier sind die Aktualisierungsseitendaten.
<Body ng-App = "Starter" ng-controller = "actionSheetCtl"> <Ion-Pane> <Ion-Content> <Ion-refresher Pulling-text = "Dropdown-Refresh" On-Refresh = "Dorefresh ()"> </Ion-Refresher> <ion-list> <Ion-EITEM-EITEM NG-REPEAT = INLAGE "INLAGE" ION <ION <ION <ION <ION-EITEM NG-REPEAT = EINGLEICH "INLAGE" ION <ION <ION <ION <ION <ION <ION <ION-EITEL-EITEL-EITEL-EITEL. ng-bind = "item.name"> </ion-item> </ion-list> </ion-content> </ion-pane> </body>
JavaScript -Code
$ scope.items [] Dies sind die Daten, die gerade auf die Seite gekommen sind
DoreFresh () ist dies offensichtlich die Methode, die Sie ausführen, wenn Sie aktualisieren möchten
item.json Dies ist, wenn Sie zum Aktualisieren klicken, und wir müssen Daten erneut begeben. Dieser JSON sind die neuesten Daten. Im Projekt müssen Sie Daten aus dem Server neu begeben und auf den Client aktualisieren.
Angular.module ('Starter', ['Ionic']). Run (Funktion ($ Ionicplatform) {$ Ionicplatform.ready (function () {// Die Zubehörleistange ausblenden standardmäßig (entfernen Sie diese, um die Zubehörleisen über der Tastatur // für die Formulare) if (window.cordova && andcordova.cordova.cordova.Cordova.Cordova.Cordova.Cordova.Plugins.Keyboard) anzuzeigen. {cordova.plugins.Keyboard.hideKeyboardAccessoryBar (true);} if (window.statusBar) {statusBar.Styledefault ();}});}). Controller ('ActionSheetctl', ['$ Scope', $ Timeout ' , '$ http', function ($ scope, $ timeout, $ http) {$ scope.items = [{"name": "html5"}, {"name": "javascript"}, {"name": "cs Probleme $ http.get ('http://www.aliyue.net/demo_Source/item.json') .success (function (newItems) {$ scope.items = newItems;}). Schließlich (Funktion () {$ scope.item.json Dateidaten:
[{"Name": "Rookie -Tutorial"}, {"Name": "www.aliyue.net"}]Ionic implementiert die Dropdown-Aktualisierung der Seite (Ion-Refreesher-Funktion) und führt Sie so sehr vor. In Zukunft werde ich Ihnen vorstellen, wie Sie Slide-up-Laden und weitere Funktionen implementieren. Bitte achten Sie weiterhin auf die aufregenden Inhalte von Wulin.com.