navigasi ionik
ion-nav-view
Apabila pengguna menyemak imbas dalam apl anda, ionik boleh mengesan sejarah penyemakan imbas. Dengan mengesan sejarah penyemakan imbas, anda boleh menukar paparan dengan betul apabila meleret ke kiri atau kanan.
Menggunakan antara muka pengaturcaraan aplikasi seperti modul penghala AngularUI boleh dibahagikan kepada $states yang berbeza. Teras Angular ialah perkhidmatan penghalaan dan URL boleh digunakan untuk mengawal paparan.
Penghalaan AngularUI menyediakan pengurusan keadaan yang lebih berkuasa, iaitu, keadaan boleh dinamakan, bersarang dan paparan digabungkan, membenarkan lebih daripada satu templat dipaparkan pada halaman yang sama.
Selain itu, setiap negeri tidak perlu terikat pada URL dan data boleh ditolak ke setiap negeri dengan lebih fleksibel.
Dalam contoh berikut, kami akan mencipta paparan navigasi yang mengandungi keadaan berbeza dalam aplikasi.
Pilih ionNavView sebagai arahan peringkat teratas dalam penanda kami. Untuk memaparkan bar pengepala kami menggunakan arahan ionNavBar untuk mengemas kini melalui navigasi.
Seterusnya, kita perlu menetapkan nilai keadaan kita yang akan diberikan.var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'home.html'
})
.state('music', {
url: '/music',
templateUrl: 'music.html'
});
});Buka aplikasi sekali lagi, $stateProvider akan menanyakan url untuk melihat sama ada ia sepadan dengan nilai status indeks, dan kemudian memuatkan index.html ke <ion-nav-view>.
Jadi ini juga cara untuk menambah Home.html pada APP kami:
<script id="home" type="text/ng-template"> <!-- The title of the ion-view will be shown on the 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>
Ini adalah pendekatan yang sangat Baik, kerana templat akan dimuatkan dengan cepat dan dicache dan bukannya memuatkannya melalui rangkaian.
Caching
Apabila kita melompat ke paparan yang telah dicache, paparan akan diaktifkan, peranannya akan disambung semula dan elemennya akan disimpan dalam Dom. Ini juga membolehkan kedudukan skrol paparan sebelumnya dikekalkan.
Cache juga boleh dihidupkan dan dimatikan dalam pelbagai cara. Secara lalai Ionic akan cache maksimum 10 halaman, dan ini bukan satu-satunya perkara yang boleh disesuaikan Aplikasi boleh menetapkan keadaan eksplisit untuk menetapkan sama ada paparan harus dicache atau tidak.
Perhatikan bahawa kerana kami menyimpan paparan ini, kami tidak memusnahkan pandangan sebaliknya, pandangannya juga dialih keluar daripada $watch.
Oleh kerana skop tontonan seterusnya tidak dimusnahkan dan dibina semula, pengawal tidak dimuatkan lagi. Jika apl/pengawal perlu mengetahui masa untuk memasuki atau meninggalkan paparan, mungkin berguna untuk memancarkan acara paparan dari dalam fungsi ionView, seperti $ionicView.enter.
Lumpuhkan caching secara global
$ionicConfigProvider boleh digunakan untuk menetapkan bilangan maksimum paparan yang dibenarkan untuk dicache, dengan menetapkannya kepada 0 untuk melumpuhkan semua caching.
$ionicConfigProvider.views.maxCache(0);
Lumpuhkan caching dalam STATE PROVIDER
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})Lumpuhkan caching melalui sifat
<ion-view cache-view="false" view-title="My Title!"> ... </ion-view>
AngularUI Router
Sila lawati dokumen AngularUI Router untuk mengetahui lebih lanjut.
API
| 属性 | 类型 | 详情 |
|---|---|---|
| name (可选) | 字符串 | 一个视图的名字。这个名字应该是在相同的状态下其他视图中唯一的。你可以在不同的状态中有相同名称的视图。欲了解详细信息，查看ui-router的 ui-view 文档。 |
ion-view
kepunyaan ionNavView. Bekas untuk kandungan yang digunakan untuk memaparkan paparan atau maklumat bar navigasi.
Berikut ialah contoh halaman pemuatan bar navigasi dengan tajuk "Halaman Saya".
<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
| Properti | Jenis | Butiran | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| tajuk (pilihan) | Rentetan |
ionNavBar induk. | ||||||||||||
| butang sembunyi-belakang (pilihan) | Boolean value | Sama ada butang belakang tersembunyi dalam | ||||||||||||
| hide-nav-bar (pilihan) | Boolean value | Sama ada |
| 属性 | 类型 | 详情 |
|---|---|---|
| delegate-handle (可选) | 字符串 | 该句柄用 |
| align-title (可选) | 字符串 | 导航栏标题对齐的位置。可用： 'left', 'right', 'center'。 默认为 'center'。 |
Penggunaan
<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| Atribut | Jenis< /th> | Butiran |
|---|---|---|
| pemegang wakil (pilihan) < / td> | String | Hendal ini mengenal pasti bar navigasi ini dengan $ionicNavBarDelegate. |
| align-title (pilihan) | String | Kedudukan di mana tajuk bar navigasi dijajarkan. Tersedia: 'kiri', 'kanan', 'tengah'. Lalai kepada 'tengah'. |
butang-nav-ion
| 属性 | 类型 | 详情 |
|---|---|---|
| side | 字符串 | 在父 |
<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<🎜>
| Atribut | Jenis< /th> | Butiran |
|---|---|---|
| sisi | String | < td ><🎜>Kedudukan di mana butang diletakkan dalam
butang-belakang-nav-ion
Mencipta butang dalam ionNavBar.
Apabila pengguna boleh kembali dalam navigasi semasa, butang kembali akan dipaparkan.
Penggunaan
Tindakan butang lalai:
<ion-nav-bar> <ion-nav-back-button class="button-clear"> <i class="ion-arrow-left-c"></i> 后退 </ion-nav-back-button> </ion-nav-bar>
Tindakan klik tersuai, gunakan $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();
};
}untuk memaparkan tajuk sebelumnya pada butang belakang, juga Gunakan $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 ialah arahan atribut yang digunakan apabila mengklik elemen pada paparan, seperti <a href> sref>.
Apabila diklik, nav-clear akan menyebabkan elemen yang diberikan melumpuhkan peralihan paparan seterusnya. Perintah ini berguna, sebagai contoh, untuk pautan dalam menu bar sisi.
Penggunaan
Berikut ialah pautan dengan arahan jelas navigasi ditambahkan pada menu bar sisi. Mengklik pautan ini akan melumpuhkan sebarang animasi antara paparan.
<a nav-clear menu-close href="#/home" class="item">首页</a>
ion-nav-title
ion-nav-title digunakan untuk menetapkan tajuk dalam templat paparan ion.
Penggunaan
<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
Tetapkan jenis peralihan yang digunakan, yang boleh menjadi: ios, android dan tiada.
Penggunaan
<a nav-transition="none" href="#/home">Home</a>
arah navigasi
Tetapkan arah animasi peralihan dalam paparan navigasi, yang boleh ke hadapan, belakang, masuk, keluar, tukar .
Penggunaan
<a nav-direction="forward" href="#/home">Home</a>
$ionicNavBarDelegate
Keizinan mengawal arahan ion-nav-bar.
Penggunaan
<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);
}
}Kaedah
align([direction])
Kembali dalam sejarah penyemakan imbas.
| Parameter | Jenis | Butiran | ||||||
|---|---|---|---|---|---|---|---|---|
| acara (pilihan) | DOMEvent |
|
align([direction])Kapsyen dengan butang dijajarkan ke arah yang ditentukan.
| 参数 | 类型 | 详情 |
|---|---|---|
| direction (可选) | 字符串 | 标题文字对齐的方向。可用: 'left', 'right', 'center'。 默认: 'center'。 |
| Parameter | Jenis | Butiran |
|---|---|---|
| arah (pilihan) | String | Arah di mana teks tajuk dijajarkan. Tersedia: 'kiri', 'kanan', 'tengah'. Lalai: 'tengah'. |
Nilai Boolean, sama ada butang belakang dipaparkan.
showBar(show)
| 参数 | 类型 | 详情 |
|---|---|---|
| show | 布尔值 | 导航栏是否显示。 |
| Parameter | Jenis | Butiran |
|---|---|---|
| tunjukkan | Nilai Boolean | Sama ada bar navigasi dipaparkan. |
Nilai pulangan:
Nilai Boolean, sama ada bar navigasi dipaparkan.| 参数 | 类型 | 详情 |
|---|---|---|
| show (可选) | 布尔值 | 是否显示后退按钮 |
showBackButton([show])<🎜>Tetapkan atau dapatkan sama ada butang ion-nav-back-back dipaparkan. <🎜>
| Parameter | Jenis | Butiran |
|---|---|---|
| tunjukkan (pilihan) | Nilai Boolean | <🎜>Sama ada mahu memaparkan butang belakang<🎜> |
title(title)
Tetapkan tajuk untuk bar navigasi-ion.
| Parameter | Jenis | Butiran | ||||||
|---|---|---|---|---|---|---|---|---|
| tajuk | String |
|
viewHistory()digunakan untuk melihat sejarah.
currentView()Paparan semasa apl.
currentHistoryId()ID timbunan sejarah, yang merupakan bekas induk paparan semasa.
currentTitle([val])Mendapat atau menetapkan tajuk paparan semasa.
backView()Kembali ke paparan terakhir dilihat.
backTitle()Dapatkan tajuk paparan terakhir dilihat.
forwardView()Mengembalikan pandangan serta-merta mendahului paparan semasa dalam timbunan sejarah.
currentStateName()Mengembalikan nama keadaan semasa.
goBack([backCount])paparan sandaran apl, jika pandangan sandaran wujud.
