Cuando está haciendo proyectos, la función de actualización desplegable es muy común, entonces, ¿cómo lo implementa? A continuación, el editor le presentará cómo usar IONIC para implementar la función de actualización desplegable de la página. ¡Echemos un vistazo!
Para implementaciones específicas, consulte el siguiente código fuente:
Código HTML
Ion-REFRESHER: es el icono que se actualiza por desplegable;
Pulling-text = "Tirar hacia abajo Refresh" Las preguntas aquí se pueden reemplazar a voluntad, como esta;
on-refresh = "dorefresh ()" Este es el método que necesitamos ejecutar al tirar hacia abajo. Aquí están los datos de la página refrescantes.
<cuerpo ng-app = "Starter" ng-Controller = "ActionSheetCtl"> <ion-pane> <ion-content> <ion-resefresher string-text = "desplegable renoh" en-reFefresh = "dorefresh ()"> </ion-infresher ng-bind = "item.name"> </ ion-item> </ ion-list> </ ion-content> </ ion-pane> </body>
Código JavaScript
$ Scope.Items [] Estos son los datos que acaban de entrar en la página
dorefresh () obviamente este es el método que ejecuta cuando desea actualizar
item.json Esto es cuando hace clic para actualizar y necesitamos volver a realizar datos. Este JSON son los últimos datos. En el proyecto, debe volver a realizar datos desde el servidor y actualizarlos al cliente.
Angular.module ('Starter', ['ionic']). Run (function ($ ionicplatform) {$ ionicplatform.ready (function () {// oculta la barra de accesorios de forma predeterminada (elimine esto para mostrar la barra de accesorios por encima del teclado // para las entradas de formulario) if (window.cordova && window.cordova.plugins.keyboard) {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} if (window.statusbar) {statusbar.styledefault ();}});}). Controller ('ActionSheetCtl', ['$ Scope', '$ TimeOut' ' , '$ http', function ($ scope, $ timeOut, $ http) {$ scope.items = [{{"nombre": "html5"}, {"name": "javascript"}, {"nombre": "css3"}]; $ scope.doreFresh = function () Problemas entre domados $ http.get ('http://www.aliyue.net/demo_source/item.json') .success (function (newItems) {$ scope.items = newitems;}). Finalmente (function () {$ scope. $ broadcast ('scroll.refreshcomspplete');});});});}Datos del archivo item.json:
[{"Nombre": "Tutorial de Rookie"}, {"Nombre": "www.aliyue.net"}]Ionic Implementa la actualización desplegable de la página (función de refresher ion-refresher) y le presentará mucho. En el futuro, le presentaré cómo implementar la carga de deslizamiento y más funciones. Continúe prestando atención al contenido emocionante que le trae Wulin.com.