百度360必应搜狗淘宝本站头条
ug5 0软件免费下载右键菜单清理flac文件grub4doss spline
当前位置：网站首页 > 技术文章 > 正文

ionic 导航（导航ios）

cac55 2024-11-05 09:28 47 浏览 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

(可选)

字符串

显示在父ionNavBar的标题。

hide-back-button

(可选)

布尔值

默认情况下，是否在父ionNavBar隐藏后退按钮。

hide-nav-bar

(可选)

布尔值

默认情况下，是否隐藏父ionNavBar。

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

(可选)

字符串

该句柄用$ionicNavBarDelegate标识此导航栏。

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字符串

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

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 回退视图，如果回退的视图存在。

相关推荐

这些端口关闭后，系统会更安全!系统高危端口及其关闭方法?

在这高速发展的网络信息时代，信息安全显得非常重要，病毒、木马、非法侵入等安全事件经常发生。在我们使用电脑过程中，为了确保系统安全，以下高危端口必须关闭，防患于未然。一.Windows系统的445端口...

什么是安全组_什么是安全组件

安全组是一种虚拟防火墙，具备状态检测和数据包过滤功能，用于在云计算环境中设置网络访问控制，保护云服务器（ECS实例）、负载均衡、云数据库等资源。核心特性：虚拟防火墙：安全组控制云资源的出入站流量，决定...

针对单个网站的渗透思路(精)_网站渗透步骤

欢迎搜索公众号：白帽子左一每天分享更多黑客技能，工具及体系化视频教程（免费领首先，当我们拿到一个网站的域名或者IP的时候。最先要做的是信息收集。下面着重介绍一下信息收集模块一、信息收集——端口扫描与分...

风险突出的高危端口汇总 一网打尽 !

高危端口一直是攻击者关注的焦点，了解这些端口的风险、攻击方式及防护策略至关重要。一、文件传输类端口1.TCP20/21：FTP服务端口FTP（文件传输协议）用于文件的上传和下载。其明文传输特性使得...

指定IP地址进行远程访问服务器设置方法(windows系统)

我们有很多服务器经常受到外界网络的干扰，入侵者们通过扫描3389端口爆破密码非法进入我们的服务器，这时，我们可以配置服务器IP安全策略来限制一些IP访问，大大提高了服务器的安全。实验环境：服务端：...

服务器被黑，如何查找入侵、攻击痕迹呢?

本文出自头条号老王谈运维，转载请说明出处。引言：随着网络的越来越普及，使用的越来越频繁，木马病毒也随之侵入进来并且肆无忌惮。如何将病毒拒之门外，已成为我们普通大众必须具备的一项技能。这样，你才能使木马...

win10 telnet命令怎么查看端口是否打开

可能大家也会遇到这个问题，win10telnet命令查看端口是否打开的步骤是什么？具体方法如下：1、键盘输入快捷键WIN+R，打开运行窗口。2、输入cmd，点击确定按钮。3、弹出cmd命令行窗...

Crysis勒索病毒针对政企服务器攻击升级 腾讯安全展开全面防御

近日，腾讯安全御见威胁情报中心监测发现，Crysis勒索病毒在国内传播升级，感染数量呈上升趋势，该病毒主要通过RDP弱口令爆破传播入侵政企机构，加密重要数据，由于该病毒的加密破坏暂无法解密，被攻击后将...

Windows端口详解，这几个端口不能开!

一、血泪警告这7个端口开着电脑秒变公共厕所445端口：勒索病毒专用通道永恒之蓝病毒最爱突破口，文件共享功能成致命漏洞。企业内网还敢用用，个人电脑开着就是作死135-139端口：网络邻居成内鬼，Wind...

网络通讯笔记_网络通讯笔记怎么写

网络通讯一、NIC（网卡）二、CMD命令提示符三、服务、协议与端口常见的计算机服务常见的计算机端口与协议四、DOS命令1、基本DOS命令五、地址一、NIC（网卡）网络接口控制器又叫网络适配器也就是...

服务器远程端口是什么意思?什么是服务器远程端口?

什么是服务器远程端口？如图：IP冒号后面的数字这就是服务器的一个远程端口服务器远程端口是什么意思？服务器远程端口是服务器通信服务中的一个服务端窗口号码，取值范围是1-65535.一个服务器里面包含服务...

服务器节点到底是啥?看完这篇全明白，旧电脑也能派上大用场

不少朋友看了我用旧电脑改服务器节点的文章，后台都在问：“服务器节点到底能干啥？”其实这东西没那么神秘，今天用大白话讲讲，看完你就知道家里的旧设备藏着多大潜力。服务器节点：网络世界的“小工位”简单说...

广东通管局预警:勒索病毒威胁“关键信息基础设施”，应高度警惕

来源：澎湃新闻据广东省通信管理局网站消息，广东省通信管理局5月12日发布了《关于勒索病毒对关键信息基础设施威胁的预警通报》。通报称，5月7日，美国最大燃油运输管道商“科洛尼尔”（ColonialP...

80端口和443端口是什么?服务器端口干什么用的?

80和443端口是最常见的2个端口，都是提供网络WEB浏览服务所需要的端口，一台服务器通过不同的端口，提供不同的服务。80端口服务：HTTP（HyperTextTransportProtocol）...

从单日网络安全风险看当前网络安全状况

一、核心结论（从单日数据看全局风险）通过对2025年8月18日这一天的非法访问数据深度分析，可以清晰看到：网络环境中的安全威胁呈现高频次、多目标、全球化三大特征。单日4557次非法访问尝试，覆盖22、...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2023011147号-26