首页/Ionic/列表

ionic-tab的隐藏与显示

来源:  2018-04-03 13:23:27    评论:0点击:

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

作者:krock01
链接:https://www.jianshu.com/p/439ecdc3e69a
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权