ionic 导航（导航ios）
cac55 2024-11-05 09:28 45 浏览 0 评论
ion-nav-view
当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。
采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。
AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套， 以及合并视图，允许一个以上模板呈现在同一个页面。
此外，每个状态无需绑定到一个URL，并且数据可以更灵活地推送到每个状态。
以下实例中，我们将创建一个应用程序中包含不同状态的导航视图。
我们的标记中选择ionNavView作为顶层指令。显示一个页眉栏我们用 ionNavBar 指令通过导航更新。
接下来，我们需要设置我们的将渲染的状态值。
var app = angular.module('myApp', ['ionic']);app.config(function($stateProvider) {
$stateProvider .state('index', {
url: '/',
templateUrl: 'home.html'
})
.state('music', {
url: '/music',
templateUrl: 'music.html'
});});再打开应用，$stateProvider 会查询url, 看是否匹配 index 状态值, 再加载index.html到<ion-nav-view>。
页面加载都是通过URLs配置的。在Angular中创建模板最一个简单的方式就是直接将他放到html模板文件中并且用<script type="text/ng-template"> 包含。
所以这也是一种方式将Home.html加入到我们的APP中来：
<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>
尝试一下 ?
这是一个很好的方法，因为模板会很快的加载并被缓存就不同通过网络再去加载。
缓存
通常情况下，视图都被缓存了能提升性能。当跳出视图时，他的元素被保留在Dom中，并且它的作用域也从 $watch 中移除。
当我们跳到一个已经被缓存了的视图，视图会被激活，它的作用域被重新连接上，Dom中也保存了他的元素。这也允许保持以前的视图滚动位置。
缓存也可以通过很多方式来开启和关闭的。默认Ionic将最大缓存页面数为10个，并且这并不是唯一可以定制的，应用程序可以显式状态来设置视图应不应该被缓存。
注意，因为我们是缓存这些视图，我们没有破坏作用域。相反, 它的作用域也从 $watch 中移除。
因为接下来的观看作用域并没有被摧毁和重建，控制器也没被再次加载。如果app/controller需要知道什么时候进入或离开一个视图，再视图事件从 ionView 作用内发出, 例如 $ionicView.enter， 可能是有用的。
全局禁用缓存
$ionicConfigProvider 可以用于设置最大允许缓存的视图数量，通过设置为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 (可选) | 字符串 | 一个视图的名字。这个名字应该是在相同的状态下其他视图中唯一的。你可以在不同的状态中有相同名称的视图。欲了解详细信息，查看ui-router的 ui-view 文档。 |
ion-view
隶属于ionNavView。 一个内容的容器，用于展示视图或导航栏信息。
下面是一个带有"我的页面"标题的导航栏载入页面的例子。
<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 (可选) | 字符串 | 显示在父 |
| hide-back-button (可选) | 布尔值 | 默认情况下，是否在父 |
| hide-nav-bar (可选) | 布尔值 | 默认情况下，是否隐藏父 |
ion-nav-bar
创建一个顶部工具栏，当程序状态改变时更新。
用法
<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
| 属性 | 类型 | 详情 |
|---|---|---|
| delegate-handle (可选) | 字符串 | 该句柄用 |
| align-title (可选) | 字符串 | 导航栏标题对齐的位置。可用： 'left', 'right', 'center'。 默认为 'center'。 |
ion-nav-buttons
隶属于ionNavView
在ionView内的ionNavBar上用ionNavButtons设置按钮。
你设置的任何按钮都将被放置在导航栏的相应位置，当用户离开父视图时会被销毁。
用法
<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
| 属性 | 类型 | 详情 |
|---|---|---|
| side | 字符串 | 在父 |
ion-nav-back-button
在一个ionNavBar中创建一个按钮。
当用户在当前导航能够后退时，将显示后退按钮。
用法
默认按钮动作:
<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();
};}在后退按钮上显示上一个标题，也用$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一个当点击视图上的元素时用到的属性指令，比如一个 <a href> 或者一个 <button ui-sref>。
当点击时，nav-clear将会导致给定的元素，禁止下一个视图的转换。这个指令很有用，比如，侧栏菜单内的链接。
用法
下面是一个侧栏菜单内添加了nav-clear指令的一个链接。点击该链接将禁用视图间的任何动画。
<a nav-clear menu-close href="#/home" class="item">首页</a>
ion-nav-title
ion-nav-title 用于设置 ion-view 模板中的标题。
用法
<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
设置使用的过渡类型，可以是：ios, android, 和 none。
用法
<a nav-transition="none" href="#/home">Home</a>
nav-direction
设置导航视图中过渡动画的方向，可以是forward, back, enter, exit, swap。
用法
<a nav-direction="forward" href="#/home">Home</a>
$ionicNavBarDelegate
授权控制 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])
在浏览历史中后退。
| 参数 | 类型 | 详情 |
|---|---|---|
| event (可选) | DOMEvent | 事件对象（如来自点击事件） |
align([direction])
带有按钮的标题对齐到指定的方向。
| 参数 | 类型 | 详情 |
|---|---|---|
| direction (可选) | 字符串 | 标题文字对齐的方向。可用: 'left', 'right', 'center'。 默认: 'center'。 |
返回值: 布尔值， 后退按钮是否显示。
showBar(show)
设置或获取 ion-nav-bar 是否显示。
| 参数 | 类型 | 详情 |
|---|---|---|
| show | 布尔值 | 导航栏是否显示。 |
返回值: 布尔值， 导航栏是否显示。
showBackButton([show])
设置或获取 ion-nav-back-button 是否显示。
| 参数 | 类型 | 详情 |
|---|---|---|
| show (可选) | 布尔值 | 是否显示后退按钮 |
title(title)
为ion-nav-bar设置标题。
| 参数 | 类型 | 详情 |
|---|---|---|
| title | 字符串 | 显示新标题。 |
$ionicHistory
$ionicHistory 用于跟踪用户在 app 内的浏览记录。
方法
viewHistory()
用于查看历史记录。
currentView()
app 的当前视图。
currentHistoryId()
历史堆栈的 ID，是当前视图的父类容器。
currentTitle([val])
获取或设置当前视图的标题。
backView()
返回上次浏览的视图。
backTitle()
获取上次浏览的视图的标题。
forwardView()
返回历史堆栈中当前视图的上一个视图。
currentStateName()
返回当前状态名。
goBack([backCount])
app 回退视图，如果回退的视图存在。
相关推荐
- Mac电脑强制删除任何软件方法-含自启动应用
-
对于打工者来说，进入企业上班使用的电脑大概率是会被监控起来，比如各种流行的数据防泄漏DLP，奇安信天擎，甚至360安全卫士，这些安全软件你想卸载是非常困难的，甚至卸载后它自己又安装回来了，并且还在你不...
- Linux基础知识 | 文件与目录大全讲解
-
1.linux文件权限与目录配置1.文件属性Linux一般将文件可存取的身份分为三个类别，分别是owner/group/others，且三种身份各read/write/execute等权限文...
- 文件保护不妥协:2025 年 10 款顶级加密工具推荐
-
数据安全无小事，2025年这10款加密工具凭借独特功能脱颖而出，从个人到企业场景全覆盖，第一款为Ping32，其余为国外英文软件。1.Ping32企业级加密核心工具，支持200+文件格...
- 省心省力 一个软件搞定系统维护_省心安装在哪里能找到
-
◆系统类似于我们居住的房间，需要经常打理才能保持清洁、高效。虽然它本身也自带一些清理和优化的工具，但借助于好用的第三方工具来执行这方面的任务，会更让人省心省力。下面笔者就为大家介绍一款集多项功能于一身...
- JAVA程序员常用的几个工具类_java程序员一般用什么软件写程序
-
好的工具做起事来常常事半功倍，下面介绍几个开发中常用到的工具类，收藏一下，也许后面真的会用到。字符串处理：org.apache.commons.lang.StringUtilsisBlank(Char...
- 手工解决Windows10的若干难题_windows10系统卡顿怎么解决
-
【电脑报在线】很多朋友已经开始使用Win10，估计还只是测试版本的原因，使用过程中难免会出现一些问题，这里介绍解决一些解决难题的技巧。技巧1：让ProjectSpartan“重归正途”从10074...
- System32文件夹千万不能删除，看完这篇你就知道为什么了
-
C:\Windows\System32目录是Windows操作系统的关键部分，重要的系统文件存储在该目录中。网上的一些恶作剧者可能会告诉你删除它，但你不应该尝试去操作，如果你尝试的话，我们会告诉你会发...
- Windows.old 文件夹:系统备份的解析与安全删除指南
-
Windows.old是Windows系统升级（如Win10升Win11）或重装时，系统自动在C盘创建的备份文件夹，其核心作用是保留旧系统的文件、程序与配置，为“回退旧系统”提供保...
- 遇到疑难杂症?Windows 10回收站问题巧解决
-
回收站是Windows10的一个重要组件。然而，我们在使用过程中，可能会遇到一些问题。例如，不论回收站里有没有文件，都显示同一个图标，让人无法判别回收站的空和满的真实情况；没有了像Windows7...
- 卸载软件怎么彻底删掉?简单几个步骤彻底卸载，电脑小白看过来
-
日常工作学习生活中，我们需要在安装一些软件程序，但随着软件的更新迭代速度，很多时候我们需要重新下载安装新的程序，这时就需要将旧的一些软件程序进行卸载。但是卸载软件虽然很简单，但是很多小伙伴们表示卸载不...
- 用不上就删!如何完全卸载OneDrive?
-
作为Windows10自带的云盘，OneDrive为资料的自动备份和同步提供了方便。然而，从隐私或其他方面考虑，有些人不愿意使用OneDrive。但Windows10本身不提供直接卸载OneDri...
- 【Linux知识】Linux下快速删除大量文件/文件夹方法
-
在Linux下，如果需要快速删除大量文件或文件夹，可以使用如下方法：使用rm命令删除文件：可以使用rm命令删除文件，例如：rm-rf/path/to/directory/*这个命令会递...
- 清理系统不用第三方工具_清理系统垃圾用什么软件
-
清理优化系统一定要借助于优化工具吗？其实，手动优化系统也没有那么神秘，掌握了方法和技巧，系统清理也是一件简单和随心的事。一方面要为每一个可能产生累赘的文件找到清理的方法，另一方面要寻找能够提高工作效率...
- 系统小技巧:软件卸载不了?这里办法多
-
在正常情况下，我们都是通过软件程序组中的卸载图标，或利用控制面板中的“程序和功能”模块来卸载软件的。但有时，我们也会发现利用卸载图标无法卸载软件或者卸载图标干脆丢失找不到了，甚至控制面板中卸载软件的功...
- 麒麟系统无法删除文件夹_麒麟系统删除文件权限不够
-
删除文件夹方法例：sudorm-rf文件夹名称。删除文件方法例：sudorm-r文件名包括扩展名。如果没有权限，给文件夹加一下权限再删。加最高权限chmod775文件名加可执行权限...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (52)
- javaabstract (48)
- 新浪微博头像 (53)
- grub4dos (66)
- s扫描器 (51)
- httpfile dll (48)
- ps实例教程 (55)
- taskmgr (51)
- s spline (61)
- vnc远程控制 (47)
- 数据丢失 (47)
- wbem (57)
- flac文件 (72)
- 网页制作基础教程 (53)
- 镜像文件刻录 (61)
- ug5 0软件免费下载 (78)
- debian下载 (53)
- ubuntu10 04 (60)
- web qq登录 (59)
- 笔记本变成无线路由 (52)
- flash player 11 4 (50)
- 右键菜单清理 (78)
- cuteftp 注册码 (57)
- ospf协议 (53)
- ms17 010 下载 (60)