VS2015 Cordova Ionic移动开发(五)

一、创建侧边菜单和导航项目

1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目。将SideMenu和Tabs项目里的templates和js文件合并到空项目里,修改js对应的代码即可。完整项目工程如下:

image

2.App.js代码修改如下:

/** 加载所需要的各个模块* 上篇教程中加载了controllers控制器模块* 本篇教程加载了services服务模块*/
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function ($ionicPlatform) {$ionicPlatform.ready(function () {if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);cordova.plugins.Keyboard.disableScroll(true);}if (window.StatusBar) {StatusBar.styleDefault();}});
})
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {//用来配置各个平台导航条样式(统一导航条位置)$ionicConfigProvider.platform.ios.tabs.style('standard');$ionicConfigProvider.platform.ios.tabs.position('bottom');$ionicConfigProvider.platform.android.tabs.style('standard');$ionicConfigProvider.platform.android.tabs.position('standard');$ionicConfigProvider.platform.ios.navBar.alignTitle('center');$ionicConfigProvider.platform.android.navBar.alignTitle('left');$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');$ionicConfigProvider.platform.ios.views.transition('ios');$ionicConfigProvider.platform.android.views.transition('android');//配置路由
    $stateProvider.state('app', {url: '/app',abstract: true,templateUrl: 'templates/menu.html',controller: 'AppCtrl'}).state('app.search', {url: '/search',views: {'menuContent': {templateUrl: 'templates/search.html'}}}).state('app.browse', {url: '/browse',views: {'menuContent': {templateUrl: 'templates/browse.html'}}}).state('app.playlists', {url: '/playlists',views: {'menuContent': {templateUrl: 'templates/playlists.html',controller: 'PlaylistsCtrl'}}}).state('app.single', {url: '/playlists/:playlistId',views: {'menuContent': {templateUrl: 'templates/playlist.html',controller: 'PlaylistCtrl'}}}).state('app.tab', {url: '/tab',abstract: true,views: {'menuContent': {templateUrl: 'templates/tabs.html'}}}).state('app.tab.dash', {url: '/dash',views: {'tab-dash': {templateUrl: 'templates/tab-dash.html',controller: 'DashCtrl'}}}).state('app.tab.chats', {url: '/chats',views: {'tab-chats': {templateUrl: 'templates/tab-chats.html',controller: 'ChatsCtrl'}}}).state('app.tab.chat-detail', {url: '/chats/:chatId',views: {'tab-chats': {templateUrl: 'templates/chat-detail.html',controller: 'ChatDetailCtrl'}}}).state('app.tab.account', {url: '/account',views: {'tab-account': {templateUrl: 'templates/tab-account.html',controller: 'AccountCtrl'}}});$urlRouterProvider.otherwise('/app/tab/dash');
});

controllers.js和services.js文件这里就不贴代码了,因为不涉及到关键代码的讲解。

3.修改menu.html内容,注意注释说明部分

<ion-side-menus enable-menu-with-back-views="false"><ion-side-menu-content><ion-nav-bar class="bar-stable"><ion-nav-back-button></ion-nav-back-button><ion-nav-buttons side="left"><button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button></ion-nav-buttons></ion-nav-bar><ion-nav-view name="menuContent"></ion-nav-view></ion-side-menu-content><ion-side-menu side="left"><ion-header-bar class="bar-stable"><h1 class="title">Left</h1></ion-header-bar><ion-content><ion-list><!--这里去掉menu-close属性,改成menu-toggle="left",不然使用返回键退出菜单时会自动关闭视图,从而导致应用程序退出。--><ion-item ng-click="login()" menu-toggle="left">Login</ion-item><ion-item href="#/app/search" menu-toggle="left">Search</ion-item><ion-item href="#/app/browse" menu-toggle="left">Browse</ion-item><ion-item href="#/app/playlists" menu-toggle="left">Playlists</ion-item></ion-list></ion-content></ion-side-menu>
</ion-side-menus>

4.最终预览效果如下

Animation

左边侧滑菜单打开后,怎么在Ripple模拟器中使用返回键来退出菜单到主界面:

image

在Ripple的Events菜单中选择回退按钮,点击FireEvent即可模拟点击返回键。

 

二、路由和视图详解

1.视图加载顺序

在index.html中有一个主视图的标签:

<ion-nav-view></ion-nav-view>

在menu.html中一个menu内容的视图标签:

<ion-nav-view name="menuContent"></ion-nav-view>

在选项卡tabs.html中有3个视图标签:

<ion-tabs class="tabs-icon-top tabs-color-active-positive"><!--重新设置路由--><ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/app/tab/dash"><ion-nav-view name="tab-dash"></ion-nav-view></ion-tab><!--重新设置路由--><ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/tab/chats"><ion-nav-view name="tab-chats"></ion-nav-view></ion-tab><!--重新设置路由--><ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/app/tab/account"><ion-nav-view name="tab-account"></ion-nav-view></ion-tab>
</ion-tabs>

我们需要在程序启动时,加载第一个标签选项卡内容(tab-dash.html)、标签选项卡(tabs.html)、左侧菜单(menu.html)

视图的渲染方式:

首先将tab-dash.html喧渲染到tabs.html的<ion-nav-view name="tab-dash"></ion-nav-view>

其次将tabs.html渲染到menu.html的<ion-nav-view name="menuContent"></ion-nav-view>

最后将menu.html渲染到index.html

视图切换方式:

在点击menu.html中的菜单项时,会把菜单项所对应的页面重新渲染到<ion-nav-view name="menuContent"></ion-nav-view>上覆盖原来的标签选项卡视图,这样在显示区域就会显示从菜单打开的视图了。如果需要返回到之前的标签选项卡视图,只需使用返回按钮就行了。导航视图的作用就在于可以使用返回按钮在各层视图时间切换实现导航作用。

 

2.状态继承和激活顺序

在上述视图加载时需要用到如下状态:

dash状态:

.state('app.tab.dash', {url: '/dash',views: {'tab-dash': {templateUrl: 'templates/tab-dash.html',controller: 'DashCtrl'}}})
tab状态:
.state('app.tab', {url: '/tab',abstract: true,views: {'menuContent': {templateUrl: 'templates/tabs.html'}}})

app状态:

.state('app', {url: '/app',abstract: true,templateUrl: 'templates/menu.html',controller: 'AppCtrl'})

状态继承:

在AngularJs中状态继承使用:app.tab.dash,访问路径相对也是继承的:#/app/tab/dash

每个状态之间使用 . 隔开。父级状态可以声明为abstract:true。当abstract为true时,父级状态默认不激活,只有当子状态被激活时,父级状态才被激活。

激活状态代码如下:

$urlRouterProvider.otherwise('/app/tab/dash');

该代码的作用就是默认激活:app.tab.dash状态。由于app.tab.dash状态从app.tab继承的,并且app.tab为abstract,所以app.tab.dash激活时同时会激活app.tab。同理,app是app.tab的父级状态并且为abstract,所以当app.tab被激活时,会同时激活app状态。

也就是说该代码同时激活了3个状态分别为:app.tab.dash、app.tab、app 。这3个状态分别对应tab-dash.html选项卡内容页、tabs.html选项卡页面、menu.html菜单页面。所以最终显示成预览的效果。

Ionic开发中一个难点就在于怎么使用路由控制视图的显示。各个路由(状态)的激活顺序,以及视图的加载顺序都尤为重要。不然就要走很多弯路。比如上述案例,有另外几种做法,要么是把menu.html内容往各个视图里粘贴,要么就是把tabs.html内容往各个内容页粘贴。这种实现方式理论上都可以,但是效率不高,维护起来麻烦。充分利用好状态的继承关系,合理的安排视图布局,是做好Ionic开发的基础。

 

三、导航条设置

由于Ionic的导航条在IOS和Android呈现的位置不一致,所以使用以下代码来让导航条在各个平台上显示一致:

//用来配置各个平台导航条样式(统一导航条位置)$ionicConfigProvider.platform.ios.tabs.style('standard');$ionicConfigProvider.platform.ios.tabs.position('bottom');$ionicConfigProvider.platform.android.tabs.style('standard');$ionicConfigProvider.platform.android.tabs.position('standard');$ionicConfigProvider.platform.ios.navBar.alignTitle('center');$ionicConfigProvider.platform.android.navBar.alignTitle('left');$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');$ionicConfigProvider.platform.ios.views.transition('ios');$ionicConfigProvider.platform.android.views.transition('android');

 

结束语:以上是一个简单的整合案例,实现了侧滑菜单和导航。详细的代码请下载源码附件。

示例代码

转载于:https://www.cnblogs.com/UltimateAvalon/p/5354542.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396407.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最佳适应算法和最坏适应算法_算法:好,坏和丑陋

最佳适应算法和最坏适应算法by Evaristo Caraballo通过Evaristo Caraballo 算法&#xff1a;好&#xff0c;坏和丑陋 (Algorithms: The Good, The Bad and The Ugly) Who has been in Free Code Camp without having the experience of spending hours trying to solve Algori…

mysql条件触发器实例_mysql触发器实例一则

例子&#xff0c;实例学习mysql触发器的用法。一&#xff0c;准备二张测试表&#xff1a;1&#xff0c;测试表1复制代码 代码示例:DROP TABLE IF EXISTS test;CREATE TABLE test (id bigint(11) unsigned NOT NULL AUTO_INCREMENT,name varchar(100) NOT NUL…

阿里大数据神预测 胜率仅5.9%中国却1:0胜韩国

写在最前面&#xff1a;这是早晨偶然看到的一篇文章&#xff0c;是对昨天中国却1&#xff1a;0胜韩国的评论。有朋友感慨&#xff1a;努力不放弃的时候&#xff0c;全世界都会帮你。这篇内容很全面的串起阿里巴巴在大数据预测方面的动作&#xff0c;角度很别致&#xff0c;分享…

Python中类、对象与self详解

先介绍一下python中的类与对象/实例。然后详细说明self。说明&#xff1a;对象等同实例&#xff0c;本文称呼不一致时请自行统一 【一】类与对象/实例 1、类 &#xff08;1&#xff09;类由名称、属性、方法三部分组成 &#xff08;2&#xff09;类是抽象模板&#xff0c;比如学…

面试题28 字符串排列

题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列。例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba。 结果请按字母顺序输出。 输入描述: 输入一个字符串,长度不超过9(可能有字符重复),字符只包括大小写字母。 1 cla…

javascript 框架_克服JavaScript框架疲劳

javascript 框架by Tero Parviainen通过Tero Parviainen 克服JavaScript框架疲劳 (Overcoming JavaScript Framework Fatigue) The JavaScript community is suffering from a wave of framework fatigue. It’s caused by the massive outpouring of new frameworks, techniq…

java开发环境:还在配classpath?你out啦!

2019独角兽企业重金招聘Python工程师标准>>> 先说结论&#xff1a;只需要配置JAVA_HOME和path路径即可&#xff0c;无需配置classpath 参考Oracle官网的说明&#xff1a; The class path tells JDK tools and applications where to find third-party and user-defi…

qpython3可以调用哪些库_Python3 如何使用asyncio库在调用第三方模块(存在IO等待)的情况下实现协程?...

问题描述demo中有一个 task_check 的模块,底层是用urllib实现,请问如果要实现使用 asyncio 库实现协程操作,需要修改这个模块的底层代码吗?如何修改? 往大佬指点问题出现的环境背景及自己尝试过哪些方法平时都是使用 gevent 库和 monkey.patch_all() 实现协程,但发现 gevent …

.Net Core 商城微服务项目系列(二):使用Ocelot + Consul构建具备服务注册和发现功能的网关...

1.服务注册 在上一篇的鉴权和登录服务中分别通过NuGet引用Consul这个包&#xff0c;同时新增AppBuilderExtensions类&#xff1a; public static class AppBuilderExtensions{public static IApplicationBuilder RegisterConsul(this IApplicationBuilder app,IApplicationLife…

java打印数组_Java中打印数组内容的方式有哪些?

下面是几种常见的打印方式。方法一&#xff1a;使用循环打印。public class Demo {public static void main(String[] args) {String[] infos new String[] {"Java", "Android", "C/C", "Kotlin"};StringBuffer strBuffer new Strin…

$(function() {})

$(function() {});是$(document).ready(function(){ })的简写&#xff0c; 最早接触的时候也说$(document).ready(function(){ })这个函数是用来取代页面中的window.onload; 用来在DOM加载完成之后执行一系列预先定义好的函数。

恢复工具

EasyRecovery http://www.upantool.com/hfxf/huifu/2011/EasyRecovery_V6.22.html转载于:https://www.cnblogs.com/cb168/p/5359133.html

四参数坐标转换c++_GPSRTK坐标转换及四参数、七参数适用条件

工程测量仪器已由经纬仪、全站仪过渡到GNSS(全球卫星导航系统)&#xff0c;特别是公路行业&#xff0c;GPS-RTK作为GNSS的一种应用目前已十分普及。现阶段GPS-RTK以WGS-84 坐标系统为主流&#xff0c;所发布的星历参数也是基于此坐标系统&#xff0c;但随着北斗导航系统的逐步完…

教主的魔法

传送门 这道题序列很长&#xff0c;但是操作数很少&#xff0c;然后也没想到什么好的数据结构来维护&#xff0c;那就分块吧。 感觉维护的过程很好想&#xff0c;修改的时候对于整个块都在内的直接打标记&#xff0c;两个零散的区间暴力重构&#xff0c;重新排序。查询的时候&a…

obs自定义编码设置_通过7个步骤设置OBS进行实时编码

obs自定义编码设置by Wesley McCann韦斯利麦肯(Wesley McCann) 通过7个步骤设置OBS进行实时编码 (Setting up OBS for Live Coding in 7 Steps) Twitch TV is a popular live-streaming service. You traditionally used Twitch to stream yourself playing video games, but …

java hadoop api_Hadoop 系列HDFS的Java API( Java API介绍)

HDFS的Java APIJava API介绍将详细介绍HDFS Java API&#xff0c;一下节再演示更多应用。Java API 官网如上图所示&#xff0c;Java API页面分为了三部分&#xff0c;左上角是包(Packages)窗口&#xff0c;左下角是所有类(All Classes是)窗口&#xff0c;右侧是详情窗口。这里推…

最大连通子数组

这次是求联通子数组的求和&#xff0c;我们想用图的某些算法&#xff0c;比如迪杰斯特拉等&#xff0c;但是遇到了困难。用BFS搜索能达到要求&#xff0c;但是还未能成功。 那么我们这样想&#xff0c;先将每行的最大子数组之和&#xff0c;然后再将这些最大之和组成一个数组&a…

redis的zset的底层实现_Redis(三)--- Redis的五大数据类型的底层实现

1、简介Redis的五大数据类型也称五大数据对象&#xff1b;前面介绍过6大数据结构&#xff0c;Redis并没有直接使用这些结构来实现键值对数据库&#xff0c;而是使用这些结构构建了一个对象系统redisObject&#xff1b;这个对象系统包含了五大数据对象&#xff0c;字符串对象(st…

科学计算机简单编程_是“计算机科学”还是“编程”?

科学计算机简单编程by Sam Corcos由Sam Corcos 是“计算机科学”还是“编程”&#xff1f; (Is It “Computer Science” or “Programming”?) 教育政策白皮书(提示&#xff1a;它们不是同一个东西) (An education policy white paper (hint: they’re not the same thing))…

[Matlab] 画图命令

matlab画图命令&#xff0c;不定时更新以便查找 set(gcf, color, [1 1 1]);     % 使图背景为白色 alpha(0.4);           %设置平面透明度 plot(Circle1,Circle2,k--,linewidth,1.25);  % k--设置线型  ‘linewidth’,1.25  设置线宽度为1.25 %线型   …