Najlepszy samouczek jonowe nawigacji jonowe nawigacji W 2024 r. W tym samouczku możesz dowiedzieć się jon-nav-view,jon-view,jon-nav-bar,jon-nav przyciski,jon-nav-back-przycisk,nav-jasne,jon-nav-title,nav-przejścia,nav-kierunek,$ IonicNavBarDelegate,$ IonicHistory,
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' }) .state('music', { url: '/music', templateUrl: 'music' }); });
Następnie otwórz aplikację $ stateProvider zapytań URL, aby sprawdzić, czy stan odpowiada wartości indeksu, a następnie załadować do index <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 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>
Jest to dobry sposób, ponieważ szablon szybko ładowane i pamięć podręczna jest inny, aby przejść przez obciążenie sieci.
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.
$ 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);
$stateProvider.state('myState', { cache: false, url : '/myUrl', templateUrl : 'my-template' })
<ion-view cache-view="false" view-title="My Title!"> pl. </ion-view>
Odwiedź docs AngularUI routera po więcej.
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 . |
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>
nieruchomość | typ | detal |
---|---|---|
tytuł (Opcjonalnie) | 字符串 | Jest on wyświetlany w macierzystej |
hide-back-przycisk (Opcjonalnie) | 布尔值 | Domyślnie, jeśli rodzic |
hide-nav-bar (Opcjonalnie) | 布尔值 | Domyślnie, jeśli ukryć rodzica |
Utwórz pasek na górze, gdy program aktualizuje zmianę statusu.
<body ng-app="starter"> <!-- 当我们浏览时,导航栏会随之更新。 --> <ion-nav-bar class="bar-positive nav-title-slide-ios7"> </ion-nav-bar> <!-- 初始化时渲染视图模板 --> <ion-nav-view></ion-nav-view> </body>
nieruchomość | typ | detal |
---|---|---|
Delegat rękojeść (Opcjonalnie) | 字符串 | Uchwyt z |
align-title (Opcjonalnie) | 字符串 | Tytuł Pasek nawigacyjny wyrównane pozycję. Dostępne: "w lewo", "prawo", "centrum". Domyślnie jest to "centrum". |
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.
<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>
nieruchomość | typ | detal |
---|---|---|
strona | 字符串 | Rodzic |
Utwórz przycisk w ionNavBar w.
Gdy użytkownik może poruszać się w obecnej recesji, zostanie wyświetlony przycisk Wstecz.
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-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.
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-jonowy Widok szablon jest używany do ustawiania tytuł.
<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>
Ustaw typ przejścia może wynosić: iOS, Android, a nikt.
<a nav-transition="none" href="#/home">Home</a>
Ustaw Nawigacja przejścia kierunek animacji, zarówno do przodu, do tyłu, wprowadzić, zjazd, swap.
<a nav-direction="forward" href="#/home">Home</a>
Uprawnienia kontrolne Instrukcje ion-nav-bar.
<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])
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 wykorzystywane do śledzenia historii przeglądania użytkownika w aplikacji.
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.