ionic 導(dǎo)航

2018-10-13 19:02 更新

ionic 導(dǎo)航

ion-nav-view

當(dāng)用戶在你的app中瀏覽時，ionic能夠檢測到瀏覽歷史。通過檢測瀏覽歷史，實現(xiàn)向左或向右滑動時可以正確轉(zhuǎn)換視圖。

采用AngularUI路由器模塊等應(yīng)用程序接口可以分為不同的$state(狀態(tài))。Angular的核心為路由服務(wù)，URLs可以用來控制視圖。

AngularUI路由提供了一個更強(qiáng)大的狀態(tài)管理，即狀態(tài)可以被命名，嵌套， 以及合并視圖，允許一個以上模板呈現(xiàn)在同一個頁面。

此外，每個狀態(tài)無需綁定到一個URL，并且數(shù)據(jù)可以更靈活地推送到每個狀態(tài)。

以下實例中，我們將創(chuàng)建一個應(yīng)用程序中包含不同狀態(tài)的導(dǎo)航視圖。

我們的標(biāo)記中選擇ionNavView作為頂層指令。顯示一個頁眉欄我們用 ionNavBar 指令通過導(dǎo)航更新。

接下來，我們需要設(shè)置我們的將渲染的狀態(tài)值。

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

再打開應(yīng)用，$stateProvider 會查詢url, 看是否匹配 index 狀態(tài)值, 再加載index.html到<ion-nav-view>。

頁面加載都是通過URLs配置的。在Angular中創(chuàng)建模板最一個簡單的方式就是直接將他放到html模板文件中并且用<script type="text/ng-template"> 包含。

所以這也是一種方式將Home.html加入到我們的APP中來：

<script id="home" type="text/ng-template">
  <!--  ion-view 標(biāo)題將顯示在 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>

嘗試一下 ?

這是一個很好的方法，因為模板會很快的加載并被緩存就不同通過網(wǎng)絡(luò)再去加載。

緩存

通常情況下，視圖都被緩存了能提升性能。當(dāng)跳出視圖時，他的元素被保留在Dom中，并且它的作用域也從 $watch 中移除。

當(dāng)我們跳到一個已經(jīng)被緩存了的視圖，視圖會被激活，它的作用域被重新連接上，Dom中也保存了他的元素。這也允許保持以前的視圖滾動位置。

緩存也可以通過很多方式來開啟和關(guān)閉的。默認(rèn)Ionic將最大緩存頁面數(shù)為10個，并且這并不是唯一可以定制的，應(yīng)用程序可以顯式狀態(tài)來設(shè)置視圖應(yīng)不應(yīng)該被緩存。

注意，因為我們是緩存這些視圖，我們沒有破壞作用域。相反, 它的作用域也從 $watch 中移除。

因為接下來的觀看作用域并沒有被摧毀和重建，控制器也沒被再次加載。如果app/controller需要知道什么時候進(jìn)入或離開一個視圖，再視圖事件從 ionView 作用內(nèi)發(fā)出, 例如 $ionicView.enter， 可能是有用的。

全局禁用緩存

$ionicConfigProvider 可以用于設(shè)置最大允許緩存的視圖數(shù)量，通過設(shè)置為0來禁用所有緩存。

$ionicConfigProvider.views.maxCache(0);

在STATE PROVIDER中禁用緩存

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

通過屬性禁用緩存

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

AngularUI 路由

請訪問 AngularUI Router's docs 了解更多。

API

屬性 類型 詳情
name
(可選)
 字符串

一個視圖的名字。這個名字應(yīng)該是在相同的狀態(tài)下其他視圖中唯一的。你可以在不同的狀態(tài)中有相同名稱的視圖。欲了解詳細(xì)信息，查看ui-router的 ui-view 文檔。

ion-view

隸屬于ionNavView。一個內(nèi)容的容器，用于展示視圖或?qū)Ш綑谛畔ⅰ?/p>

下面是一個帶有"我的頁面"標(biāo)題的導(dǎo)航欄載入頁面的例子。

<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

屬性 類型 詳情
title
(可選)
 字符串

顯示在父ionNavBar的標(biāo)題。
hide-back-button
(可選)
 布爾值

默認(rèn)情況下，是否在父ionNavBar隱藏后退按鈕。
hide-nav-bar
(可選)
 布爾值

默認(rèn)情況下，是否隱藏父ionNavBar。

ion-nav-bar

創(chuàng)建一個頂部工具欄，當(dāng)程序狀態(tài)改變時更新。

用法

<body ng-app="starter">
  <!-- 當(dāng)我們?yōu)g覽時，導(dǎo)航欄會隨之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化時渲染視圖模板 -->
  <ion-nav-view></ion-nav-view>
</body>

API

屬性 類型 詳情
delegate-handle
(可選)
 字符串

該句柄用$ionicNavBarDelegate標(biāo)識此導(dǎo)航欄。
align-title
(可選)
 字符串

導(dǎo)航欄標(biāo)題對齊的位置?？捎茫?'left', 'right', 'center'。 默認(rèn)為 'center'。

ion-nav-buttons

隸屬于ionNavView

在ionView內(nèi)的ionNavBar上用ionNavButtons設(shè)置按鈕。

你設(shè)置的任何按鈕都將被放置在導(dǎo)航欄的相應(yīng)位置，當(dāng)用戶離開父視圖時會被銷毀。

用法

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        我是一個在導(dǎo)航欄左側(cè)的按鈕！
      </button>
    </ion-nav-buttons>
    <ion-content>
      這里是一些內(nèi)容！
    </ion-content>
  </ion-view>
</ion-nav-view>

API

屬性 類型 詳情
side 字符串

在父ionNavBar中按鈕放置的位置。 可用: 'left' 或 'right'。

ion-nav-back-button

在一個ionNavBar中創(chuàng)建一個按鈕。

當(dāng)用戶在當(dāng)前導(dǎo)航能夠后退時，將顯示后退按鈕。

用法

默認(rèn)按鈕動作:

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

自定義點擊動作，用 $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();
  };
}

在后退按鈕上顯示上一個標(biāo)題，也用$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-clear

nav-clear一個當(dāng)點擊視圖上的元素時用到的屬性指令，比如一個 <a href> 或者一個 <button ui-sref>。

當(dāng)點擊時，nav-clear將會導(dǎo)致給定的元素，禁止下一個視圖的轉(zhuǎn)換。這個指令很有用，比如，側(cè)欄菜單內(nèi)的鏈接。

用法

下面是一個側(cè)欄菜單內(nèi)添加了nav-clear指令的一個鏈接。點擊該鏈接將禁用視圖間的任何動畫。

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

ion-nav-title

ion-nav-title 用于設(shè)置 ion-view 模板中的標(biāo)題。

用法

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

設(shè)置使用的過渡類型，可以是：ios, android, 和 none。

用法

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

nav-direction

設(shè)置導(dǎo)航視圖中過渡動畫的方向，可以是forward, back, enter, exit, swap。

用法

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

$ionicNavBarDelegate

授權(quán)控制 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])

在瀏覽歷史中后退。

參數(shù) 類型 詳情
event
(可選)
 DOMEvent

事件對象（如來自點擊事件）

 
align([direction])

帶有按鈕的標(biāo)題對齊到指定的方向。

參數(shù) 類型 詳情
direction
(可選)
 字符串

標(biāo)題文字對齊的方向?？捎? 'left', 'right', 'center'。 默認(rèn): 'center'。

返回值: 布爾值， 后退按鈕是否顯示。

showBar(show)

設(shè)置或獲取 ion-nav-bar 是否顯示。

參數(shù) 類型 詳情
show 布爾值

導(dǎo)航欄是否顯示。

返回值: 布爾值， 導(dǎo)航欄是否顯示。

showBackButton([show])

設(shè)置或獲取 ion-nav-back-button 是否顯示。

參數(shù) 類型 詳情
show
(可選)
 布爾值

是否顯示后退按鈕

 
title(title)

為ion-nav-bar設(shè)置標(biāo)題。

參數(shù) 類型 詳情
title 字符串

顯示新標(biāo)題。

$ionicHistory

$ionicHistory 用于跟蹤用戶在 app 內(nèi)的瀏覽記錄。

方法

viewHistory()

用于查看歷史記錄。

currentView()

app 的當(dāng)前視圖。

currentHistoryId()
歷史堆棧的 ID，是當(dāng)前視圖的父類容器。

currentTitle([val])

獲取或設(shè)置當(dāng)前視圖的標(biāo)題。

backView()

返回上次瀏覽的視圖。

backTitle()

獲取上次瀏覽的視圖的標(biāo)題。

forwardView()

返回歷史堆棧中當(dāng)前視圖的上一個視圖。

currentStateName()

返回當(dāng)前狀態(tài)名。

goBack([backCount])

app 回退視圖，如果回退的視圖存在。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號