jonowe nawigacji

jon-nav-view

Gdy użytkownicy przejdź do aplikacji, gdy jonowe w stanie wykryć historię przeglądania. Dzięki wykrywaniu historię przeglądania, przesuń palcem w lewo lub w prawo, aby osiągnąć gdy odpowiednio przekształcone widoki.

Korzystanie z modułu AngularUI interfejsy routera i inne aplikacje mogą być podzielone na różne $ (stan). Rdzeń kątowa dla usługi routingu, adresy URL mogą być wykorzystane do kontroli widoku.

AngularUI trasa zapewnia bardziej wydajne zarządzanie, państwo to może być nazwane, zagnieżdżone, a fuzja widzenia, aby umożliwić więcej niż jeden szablon prezentowany na tej samej stronie.

Ponadto każde państwo nie musi być związana z adresem URL, a dane mogą być bardziej elastyczne, aby popchnąć każdego stanu.

W poniższym przykładzie, stworzymy aplikację Widok nawigacji zawiera różne stany.

Nasz wybór ionNavView tag jako top polecenia. Wyświetla nagłówek kolumny, możemy ionNavBar instrukcje poprzez aktualizację nawigacji.

Następnie musimy ustawić nasze renderowanie wartość stanu.

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

Następnie otwórz aplikację $ stateProvider zapytań URL, aby sprawdzić, czy stan odpowiada wartości indeksu, a następnie załadować do index.html <nav-jonową widok>.

Na stronie obciążenia poprzez adresy URL skonfigurowane. Tworzenie szablonu z najbardziej prosty sposób jest bezpośrednio kątowe umieścić go w pliku szablonu html i użyć <script type = "text / NG-szablon"> zawiera.

Jest to więc sposób na home.html dodania APP w przeszłości:

<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>

Spróbuj »

Jest to dobry sposób, ponieważ szablon szybko ładowane i pamięć podręczna jest inny, aby przejść przez obciążenie sieci.

buforowanie

W normalnych okolicznościach, widoki są buforowane może poprawić wydajność. Gdy z pola widzenia, a jego elementem jest zachowany w DOM, a jej zakres jest również usunięte z $ zegarek.

Kiedy skok był buforowane widok, widok zostanie aktywowana, jej zakres zostanie podłączony, Dom zapisywane również jego element. Pozwala to również na utrzymanie dotychczasowego stanowiska widok przewijania.

Buforowanie może być również wiele sposobów, aby włączyć lub wyłączyć. Ionic Domyślna liczba maksymalna stron cache jest 10, a to nie jest jedynym konfigurowalny, aplikacja może jawnie ustawić stan widoku nie powinny być buforowane.

Należy zauważyć, że ponieważ jesteśmy buforowanie te poglądy, nie niszczą zakresu. Zamiast tego, jest on usuwany z zakresu $ zegarka.

Ponieważ następny zakres widzenia nie został zniszczony i odbudowany, sterownik nie zostanie ponownie załadowany. Jeśli aplikacja / sterownik trzeba wiedzieć, kiedy wchodzenia i wychodzenia z widoku, a następnie wyświetlić zdarzenia z ionView emisji akcji, takich jak $ ionicView.enter, może okazać się przydatna.

Globalny wyłącza buforowanie

$ IonicConfigProvider cache może być używany, aby ustawić maksymalną dopuszczalną liczbę widoków przez ustawienie na 0, aby wyłączyć wszystkie bufory.

$ionicConfigProvider.views.maxCache(0);

Wyłącz buforowanie w DOSTAWCY STATE

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

Wyłącz pamięć podręczną za pośrednictwem właściwości

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

trasa AngularUI

Odwiedź docs AngularUI routera po więcej.

API

nieruchomość	typ	detal
nazwa (Opcjonalnie)	`字符串`	Nazwa widoku. Nazwa ta powinna być tylko inne poglądy w tym samym stanie. Można mieć pogląd o tej samej nazwie w innym stanie. Aby uzyskać więcej informacji, zapoznaj się z UI-Router ui-view dokumentu .

jon-view

Związany ionNavView. Zawartość pojemnika do wyświetlanego i informacji nawigacyjnych.

Tutaj znajduje się pasek nawigacyjny z "Moja strona" heading załadować przykładową stronę.

<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>

API

nieruchomość	typ	detal
tytuł (Opcjonalnie)	`字符串`	Jest on wyświetlany w macierzystej `ionNavBar` tytule.
hide-back-przycisk (Opcjonalnie)	`布尔值`	Domyślnie, jeśli rodzic `ionNavBar` ukryć przycisk Wstecz.
hide-nav-bar (Opcjonalnie)	`布尔值`	Domyślnie, jeśli ukryć rodzica `ionNavBar` .

jon-nav-bar

Utwórz pasek na górze, gdy program aktualizuje zmianę statusu.

zwyczaj

<body ng-app="starter">
  <!-- 当我们浏览时，导航栏会随之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化时渲染视图模板 -->
  <ion-nav-view></ion-nav-view>
</body>

API

nieruchomość typ detal

nieruchomość	typ	detal
Delegat rękojeść (Opcjonalnie)	`字符串`	Uchwyt z `$ionicNavBarDelegate` identyfikuje pasek nawigacji.
align-title (Opcjonalnie)	`字符串`	Tytuł Pasek nawigacyjny wyrównane pozycję. Dostępne: "w lewo", "prawo", "centrum". Domyślnie jest to "centrum".

Delegat rękojeść

(Opcjonalnie)

字符串

Uchwyt z $ionicNavBarDelegate identyfikuje pasek nawigacji.

align-title

(Opcjonalnie)

字符串

Tytuł Pasek nawigacyjny wyrównane pozycję. Dostępne: "w lewo", "prawo", "centrum". Domyślnie jest to "centrum".

jon-nav przyciski

Związany ionNavView

Na ionNavBar ionView wewnątrz przycisku ionNavButtons Ustawienia.

Każdy przycisk można ustawić zostaną umieszczone w odpowiednim miejscu paska nawigacyjnego, gdy użytkownik opuszcza Zobacz główne zostaną zniszczone.

zwyczaj

<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>

API

nieruchomość	typ	detal
strona	`字符串`	Rodzic `ionNavBar` Umieszczenie przycisku pozycji. Dostępne: "w lewo" lub "w prawo".

jon-nav-back-przycisk

Utwórz przycisk w ionNavBar w.

Gdy użytkownik może poruszać się w obecnej recesji, zostanie wyświetlony przycisk Wstecz.

zwyczaj

Domyślne działanie przycisku:

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>

Niestandardowe kliknij akcję, z $ 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();
  };
}

Na przycisku Wstecz wyświetla poprzedni tytuł, ale także z $ 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();
  };
}

nav-jasne

nav-wyraźne atrybuty używane polecenia po kliknięciu na widoku elementu kiedy taka href> <a lub przycisk <ui-sref>.

Po kliknięciu nav-jasne spowoduje danego elementu jest zabronione pod obrotu widoku. Komenda ta jest przydatna, na przykład, linki w menu bocznym.

zwyczaj

Oto menu bocznym, aby dodać link do nav-wyraźną dyspozycję. Kliknięcie linku spowoduje wyłączenie jakichkolwiek animacji pomiędzy widokami.

<a nav-clear menu-close href="#/home" class="item">首页</a>

jon-nav-title

jon-nav-title-jonowy Widok szablon jest używany do ustawiania tytuł.

zwyczaj

<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>

nav-przejścia

Ustaw typ przejścia może wynosić: iOS, Android, a nikt.

zwyczaj

<a nav-transition="none" href="#/home">Home</a>

nav-kierunek

Ustaw Nawigacja przejścia kierunek animacji, zarówno do przodu, do tyłu, wprowadzić, zjazd, swap.

zwyczaj

<a nav-direction="forward" href="#/home">Home</a>

$ IonicNavBarDelegate

Uprawnienia kontrolne Instrukcje ion-nav-bar.

zwyczaj

<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);
  }
}

sposób

align([direction])

Powrót w historii przeglądania.

parametry	typ	detal
wydarzenie (Opcjonalnie)	`DOMEvent`	Obiekty zdarzeń (takich jak od zdarzenia click)

align([direction])

Tytuł z przyciskami wyrównany do określonego kierunku.

parametry	typ	detal
kierunek (Opcjonalnie)	`字符串`	Tytuł tekstu kierunku wyrównania. Dostępne: "w lewo", "prawo", "centrum". Domyślnie: "centrum".

Zwracana wartość: jest wyświetlany przycisk Wartość logiczna powrotem.

showBar(show)

Pobiera lub ustawia wyświetlany jest jon-nav-bar.

parametry	typ	detal
pokaz	`布尔值`	wyświetlany jest pasek nawigacyjny.

Zwracana wartość: logiczna jest wyświetlany pasek nawigacyjny.

showBackButton([show])

Pobiera lub ustawia zostanie wyświetlony-nav-back-przycisk jonowej.

parametry	typ	detal
pokaz (Opcjonalnie)	`布尔值`	Czy wyświetlać przycisk Wstecz

title(title)

Ustaw napisami jonowy-nav-bar.

parametry	typ	detal
tytuł	`字符串`	Wyświetla nowy tytuł.

$ IonicHistory

$ IonicHistory wykorzystywane do śledzenia historii przeglądania użytkownika w aplikacji.

sposób

viewHistory()

Do oglądania historii.

currentView()

Obecny widok aplikacji.

currentHistoryId()

Historia stos ID, jest pojemnikiem rodzicem bieżącego widoku.

currentTitle([val])

Pobiera lub ustawia tytuł bieżącego widoku.

backView()

Powrót do ostatnio oglądanego widoku.

backTitle()

Zdobądź tytuł widoku ostatniego przeglądania.

forwardView()

Widok z tyłu historycznego punktu widzenia aktualnego stosu.

currentStateName()

Zwraca nazwę bieżącego stanu.

goBack([backCount])

Aplikacja wycofywania widok, jeśli wycofywania widzenia istnieje.

Poprzedni: jonowe okno modalne

Dalej: Platforma jonowa

ionic kurs

ionic CSS

ionic JavaScript

jonowe nawigacji

jonowe nawigacji

jon-nav-view

buforowanie

Globalny wyłącza buforowanie

Wyłącz buforowanie w DOSTAWCY STATE

Wyłącz pamięć podręczną za pośrednictwem właściwości

trasa AngularUI

API

jon-view

API

jon-nav-bar

zwyczaj

API

jon-nav przyciski

zwyczaj

API

jon-nav-back-przycisk

zwyczaj

nav-jasne

zwyczaj

jon-nav-title

zwyczaj

nav-przejścia

zwyczaj

nav-kierunek

zwyczaj

$ IonicNavBarDelegate

zwyczaj

sposób

$ IonicHistory

sposób