ionic1开发之tabs

在实际项目的开发中,项目的长相也就是UI的结构,常见的大致分为三种:tabs型,slide-menu型以及其他型。
tabs型尤为常见,也就是在app的底部被分为了几个选项卡(tab)。大部分app都是tabs型,使用ionic start创建项目的时候默认的也是tabs的。
slide-menu:也就是侧滑菜单,移动版QQ就是一个tabs+slide-menu的app,单用slide-menu的也有,但比较少见。


常规做法

目前正在做的这个项目就是一个tabs的app,一开始的时候也是用的最常规的做法。创建了4个选项卡,tab1、tab2、tab3、tab4。
其他页面根据分类放到各个tab下,也就是在配置路由的时候给每个非tab的页面都设置views、

.state('tab.xxx', {
  url:'/xxx',
  views:{
    'tab1':{
     templateUrl:'templates/xxx.html',
     controller:'xxxCtrl'
     }
  }
})
  1. 常规的做法基本上能满足大部分的需求,只是在tab页面跳转到tab的views的页面去的时候,需要用代码$ionicTabsDelegate.hide()来隐藏tab-bar,然后在tab页面出现的时候又调用$ionicTabsDelegate.show()来显示tab-bar。

  2. tab1的views下的A页面跳转到tab2的views下面的B页面,单用$state.go()来进行跳转,跳转的时候不会出现前进的动画;
    如果使用$ionicViewSwitcher.nextDirection("forwoard/back")来添加动画,在跳转的过程中会出现黑屏的现象;
    当从B页面返回到A页面,再返回到tab1页面然后切换到tab2时,直接在tab2上显示的是B页面。此时点击页面B的返回按钮做$ionicHistory.goBack()回到的是tab1页面。此时可在每个tab页面出现时写入$ionicHistory.clearHistory()来实现切换到tab2去看到的是tab2的页面。


其他页面不设置views

做到这个时候,我选择了另外一种做法,在配置路由时不再给每个非tab页面设置views

  .state('xxx', {
    url:'/xxx',
    templateUrl:'templates/xxx.html',
    controller:'xxxCtrl'
  })
  1. 从tab页面跳转到其他页面去的时候不用再写隐藏tab-bar的代码,也不用在tab页面出现的时候写显示tab-bar的代码;

  2. 各个页面之间的跳转不会再出现tab上显示的页面是被跳转的页面。

  3. 各个页面之间跳转全没有动画了,所以就需要在跳转的时候加上代码来实现跳转动画。
    $state.go()后面加上$ionicViewSwitcher.nextDirection("forwoard");
    $ionicHistory.goBack()后面加上$ionicViewSwitcher.nextDirection("back")。

  4. A页面forward到页面B,然后B页面back到A页面,此时B页面的缓存是不会被自动清除。
    此时最简单的做法就是不缓存页面,可以在ion-view标签中设置cache-view=false;
    也可以在配置路由的时候设置cache:false;
    当然也可以设置全局最大缓存$ionicConfigProvider.views.maxCache(0),0表示所有页面都不缓存。

  5. 在对app的用户体验要求不是很高的时候可以通过设置缓存来做,如果对用户体验要求高一些的话,那就要通过代码对$ionicHistory的操作来实现缓存的清理。目前我的做法是这样的,不排除还有更好的办法可以解决这个问题!

     var backView = $ionicHistory.backView();
     if (!backView) return;var clearStateIds = [];
     var forwardViewId = backView.forwardViewId;
     if (!forwardViewId) {  
       clearStateIds.push($ionicHistory.currentView().stateId);
     } else { 
     while (forwardViewId) { 
       var view = $ionicHistory.getViewById(forwardViewId);
       clearStateIds.push(view.stateId);
       forwardViewId = view.forwardViewId;  
      }
     }
     $timeout(function () {  
       $ionicHistory.clearCache(clearStateIds);
     }, 600);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容

  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,417评论 2 45
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 23,813评论 8 183
  • 今天是您的生日,母亲,祝您生日快乐,祝您身体健康。
    阅微日记阅读 630评论 0 0
  • 今儿听两个人讲了两个故事,细一琢磨,也是巧了,都是两万元的事儿。 我一直觉得少爷不是很有少爷风范,总是一...
    abigsmile阅读 200评论 0 0
  • 赫拉 生藏于赫斯佩里德斯 头戴镶花冠冕 胸前系闪亮别针 耳挂珍珠宝石坠 借阿佛罗狄忒金腰带 身披雅典娜精绣华美锦袍...
    洛桑尔静阅读 409评论 0 2