美文网首页Web 前端开发
ionic-tab的隐藏与显示

ionic-tab的隐藏与显示

作者: krock01 | 来源:发表于2016-06-01 11:13 被阅读3027次

    在网上看到有人用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);    
    });
    });
    
    

    相关文章

      网友评论

        本文标题:ionic-tab的隐藏与显示

        本文链接:https://www.haomeiwen.com/subject/cbkcdttx.html