O melhor tutorial navegação iônica navegação iônica em 2024. Neste tutorial você pode aprender ion-nav-view,ion-view,ion-nav-bar,íon-nav-buttons,ion-nav-back-button,nav-clear,ion-nav-título,nav-transição,nav-direção,$ IonicNavBarDelegate,$ IonicHistory,
Quando os usuários navegar para o seu aplicativo quando, Jónico capaz de detectar o histórico de navegação. Ao detectar histórico de navegação, deslize para a esquerda ou para a direita para alcançar quando convertido adequadamente vistas.
Usando roteador AngularUI interfaces do módulo e outras aplicações podem ser divididas em diferentes $ state (estado). núcleo angular para os serviços de encaminhamento, URLs podem ser usadas para controlar o ponto de vista.
AngularUI rota fornece um mais poderoso gerenciamento de estado, esse estado pode ser nomeado, aninhado, ea fusão de vista, para permitir que mais de um modelo apresentado na mesma página.
Além disso, cada estado não precisa ser vinculado a um URL, e os dados podem ser mais flexível para empurrar cada estado.
O exemplo a seguir, vamos criar um aplicativo de visualização de navegação contém diferentes estados.
Nossa ionNavView tag selecção do comando top. Exibir um cabeçalho de coluna que ionNavBar instruções através da atualização de navegação.
Em seguida, precisamos definir nossa processar valor do estado.
var app = angular.module('myApp', ['ionic']); app.config(function($stateProvider) { $stateProvider .state('index', { url: '/', templateUrl: 'home' }) .state('music', { url: '/music', templateUrl: 'music' }); });
Em seguida, abra o aplicativo, $ stateProvider consulta url, para ver se o estado corresponde ao valor do índice, em seguida, carregar o index para <ion-nav-view>.
A página é carregada através de URLs configurado. Criar um modelo da forma mais simples é diretamente Angular colocá-lo no arquivo de modelo html e use <script type = "text / ng-template"> contém.Portanto, esta é uma maneira de home adicionado ao nosso APP no passado:
<script id="home" type="text/ng-template"> <!-- ion-view 标题将显示在 navbar 中 --> <ion-view view-title="Home"> <ion-content ng-controller="HomeCtrl"> <!-- The content of the page --> <a href="#/music">Go to music page!</a> </ion-content> </ion-view> </script>
Este é um bom caminho, porque o modelo vai rapidamente carregado e o cache é diferente de passar por a carga da rede.
Quando saltar tem sido vista em cache, a exibição será ativada, o seu âmbito é reconectado, Dom também salvou seu elemento. Isso também permite que para manter a posição de exibição de rolagem anterior.
Caching também pode ser muitas maneiras de ligar e desligar. número máximo padrão Ionic da cache de páginas é 10, e este não é o único personalizável, o aplicativo pode definir explicitamente o estado de exibição não deve ser armazenado em cache.
Observe que, como estamos fazendo cache esses pontos de vista, nós não destruir escopo. Em vez disso, ele também é removido do âmbito do relógio $.
Porque a próxima alcance de visualização não tenha sido destruída e reconstruída, o controlador não está carregado novamente. Se o app / controller precisa saber quando entrar ou sair de um ponto de vista, e depois ver o evento de problema acção ionView, como $ ionicView.enter, pode ser útil.
cache de $ IonicConfigProvider pode ser usado para definir o número máximo permitido de pontos de vista, definindo como 0 para desativar todos os caches.
$ionicConfigProvider.views.maxCache(0);
$stateProvider.state('myState', { cache: false, url : '/myUrl', templateUrl : 'my-template' })
<ion-view cache-view="false" view-title="My Title!"> pt. </ion-view>
Visite docs de AngularUI Router para mais.
propriedade | tipo | detalhe |
---|---|---|
nome (Opcional) | 字符串 | Um nome da exibição. Esse nome deve ser os únicos outros pontos de vista no mesmo estado. Você pode ter uma visão de mesmo nome em um estado diferente. Para mais informações, ver o ui-router documento ui-view . |
Affiliated ionNavView. O conteúdo de um contêiner para exibição exibição ou informações de navegação.
Aqui está uma barra de navegação com um "A Minha Página" título para carregar a página de exemplo.
<ion-nav-bar></ion-nav-bar> <ion-nav-view class="slide-left-right"> <ion-view title="我的页面"> <ion-content> 你好! </ion-content> </ion-view> </ion-nav-view>
propriedade | tipo | detalhe |
---|---|---|
título (Opcional) | 字符串 | É apresentado no pai |
hide-back-button (Opcional) | 布尔值 | Por padrão, se o pai |
hide-nav-bar (Opcional) | 布尔值 | Por padrão, se você ocultar o pai |
Criar uma barra de ferramentas na parte superior, quando o programa atualiza a mudança de status.
<body ng-app="starter"> <!-- 当我们浏览时,导航栏会随之更新。 --> <ion-nav-bar class="bar-positive nav-title-slide-ios7"> </ion-nav-bar> <!-- 初始化时渲染视图模板 --> <ion-nav-view></ion-nav-view> </body>
propriedade | tipo | detalhe |
---|---|---|
delegado-handle (Opcional) | 字符串 | O punho com |
alinhar-título (Opcional) | 字符串 | título barra de navegação posição alinhada. Disponível: 'centro' 'esquerda', 'direito',. O padrão é "centro". |
Affiliated ionNavView
Em ionNavBar ionView dentro com o botão ionNavButtons Configurações.
Qualquer botão definido será colocado na posição apropriada da barra de navegação, quando o usuário deixa a vista principal será destruído.
<ion-nav-bar> </ion-nav-bar> <ion-nav-view> <ion-view> <ion-nav-buttons side="left"> <button class="button" ng-click="doSomething()"> 我是一个在导航栏左侧的按钮! </button> </ion-nav-buttons> <ion-content> 这里是一些内容! </ion-content> </ion-view> </ion-nav-view>
propriedade | tipo | detalhe |
---|---|---|
lado | 字符串 | O pai |
Criar um botão em um ionNavBar in.
Quando o usuário pode navegar na atual recessão, o botão de volta será exibido.
ação do botão padrão:
<ion-nav-bar> <ion-nav-back-button class="button-clear"> <i class="ion-arrow-left-c"></i> 后退 </ion-nav-back-button> </ion-nav-bar>
clique em Personalizar ação, com US $ ionicNavBarDelegate:
<ion-nav-bar ng-controller="MyCtrl"> <ion-nav-back-button class="button-clear" ng-click="canGoBack && goBack()"> <i class="ion-arrow-left-c"></i> 后退 </ion-nav-back-button> </ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) { $scope.goBack = function() { $ionicNavBarDelegate.back(); }; }
No botão Voltar exibe o título anterior, mas também com US $ ionicNavBarDelegate.
<ion-nav-bar ng-controller="MyCtrl"> <ion-nav-back-button class="button-icon"> <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}} </ion-nav-back-button> </ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) { $scope.getPreviousTitle = function() { return $ionicNavBarDelegate.getPreviousTitle(); }; }
atributos nav-claras utilizado um comando quando você clica sobre o ponto de vista elemento quando tal <a href> ou um botão <ui-SREF>.
Quando clicado, nav-clara irá resultar em um determinado elemento é proibida sob o volume de negócios de uma vista. Este comando é útil, por exemplo, liga o menu lateral.
Aqui está um menu lateral para adicionar um link para NAV-clara instrução. Ao clicar no link irá desativar qualquer animação entre as vistas.
<a nav-clear menu-close href="#/home" class="item">首页</a>
ion-nav-título do modelo de íon-view é usado para definir o título.
<ion-nav-bar> </ion-nav-bar> <ion-nav-view> <ion-view> <ion-nav-title> <img src="logo.svg"> </ion-nav-title> <ion-content> Some super content here! </ion-content> </ion-view> </ion-nav-view>
Defina o tipo de transição pode ser usado: iOS, Android, e nenhum.
<a nav-transition="none" href="#/home">Home</a>
Definir Nav vista transição direção de animação, quer para a frente, para trás, entrar, sair, swap.
<a nav-direction="forward" href="#/home">Home</a>
instruções ion-nav-barra de controle direito.
<body ng-controller="MyCtrl"> <ion-nav-bar> <button ng-click="setNavTitle('banana')"> Set title to banana! </button> </ion-nav-bar> </body>
function MyCtrl($scope, $ionicNavBarDelegate) { $scope.setNavTitle = function(title) { $ionicNavBarDelegate.title(title); } }
align([direction])
Voltar no histórico de navegação.
parâmetros | tipo | detalhe |
---|---|---|
evento (Opcional) | DOMEvent | objetos de eventos (tais como a partir de um evento de clique) |
align([direction])
Título com botões alinhados com a direcção especificada.
parâmetros | tipo | detalhe |
---|---|---|
direção (Opcional) | 字符串 | A direção alinhamento do texto título. Disponível: 'centro' 'esquerda', 'direito',. Padrão: 'centro'. |
Valor de retorno: botão Boolean valor de volta é exibido.
showBar(show)
Obtém ou define o ion-nav-bar é exibida.
parâmetros | tipo | detalhe |
---|---|---|
mostra | 布尔值 | barra de navegação é exibida. |
valor de retorno: boolean barra de navegação é exibida.
showBackButton([show])
Obtém ou define o-nav-back-botão ion é exibida.
parâmetros | tipo | detalhe |
---|---|---|
mostra (Opcional) | 布尔值 | Se deseja exibir o botão voltar |
title(title)
Definir a legenda ion-nav-bar.
parâmetros | tipo | detalhe |
---|---|---|
título | 字符串 | Exibir o novo título. |
$ IonicHistory usado para rastrear o histórico de navegação de um usuário dentro do aplicativo.
viewHistory()
Para visualizar a história.
currentView()
A visão atual do aplicativo.
currentHistoryId()História pilha de ID, é o contêiner pai do atual exibição.
currentTitle([val])
Obtém ou define o título da exibição atual.
backView()
Voltar à última vista visualizado.
backTitle()
Obter título da vista última navegação.
forwardView()
Vista traseira em uma visão histórica da pilha atual.
currentStateName()
Retorna o nome do estado atual.
goBack([backCount])
app vista rollback, se a reversão de vista existe.