Web 前端开发

ionic-tab的隐藏与显示

2016-06-01  本文已影响3027人  krock01

在网上看到有人用ionic模仿微信写demo,我自己也尝试了下,期间遇到一些问题,特此记录一下

问题描述:

微信会话列表与单个会话在切换的时候需要显示和隐藏tabbar

解决办法:

在网上搜索到一个解决方案,是通过自定义一个指令和全局变量来实现切换的,所以具体实现办法见解决办法1

因为自己不怎么喜欢重复造轮子,所以查看了ionic api之后发现了ionic本身提供了tabs的操作委托对象,通过在controller中添加监听直接通过ionic的提供的委托$ionicTabsDelegate来实现,见下面代码实现

此代码是在ionic demo的基础上实现的,所以这里只提供关键代码

//因为ionic在app.js中已经引入,所以这里可以直接注入$ionicTabsDelegate
app.controller('ChatDetailCtrl', 
function($scope,$stateParams, Chats,$ionicTabsDelegate) {
    $scope.chat = Chats.get($stateParams.chatId);
    //在此作用域下绑定监听ionic视图在进入之前的事件
    $scope.$on('$ionicView.beforeEnter', function() {
      //关闭tab选项卡      
      $ionicTabsDelegate.showBar(false);    
});  
    //在此作用域下绑定监听ionic视图在离开之前的事件  
    $scope.$on('$ionicView.beforeLeave', function() {
      //打开tab选项卡      
      $ionicTabsDelegate.showBar(true);    
});
});

上一篇 下一篇

猜你喜欢

热点阅读