www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

跻身二级目录之后隐藏尾部导航栏,的通盘化解

2019-06-28 03:17 来源:未知

增添angularjs的通令,源码如下:

1.在标签ion-tabs中增添:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下:

2.增添angularjs的指令,源码如下:
.directive('hideTabs', function($rootScope) { return { restrict: 'A', link: function(scope, element, attributes) { scope.$on('$ionicView.beforeEnter', function() { scope.$watch(attributes.hideTabs, function(value){ $rootScope.hideTabs = value; }); }); scope.$on('$ionicView.beforeLeave', function(value) { $rootScope.hideTabs = value; }); } }; })

<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}"> 
//tabs 
</ion-tabs>

3.三您想要隐藏的界面标签 ion-view增加表明式hide-tabs=”true”,源码如下:

总结:以上多个步骤需求第二步须要我们询问一下angularjs的directive的采取格局,在此小编有一个学习地方:http://www.jikexueyuan.com/course/1538.html,最终附上示例源码地址:https://github.com/lerpo/Ionic-Demo.git

在标签ion-tabs中丰富:ng-class=”{‘tabs-item-hide': $root.hideTabs}”,源码如下

//app已经在其他文件中指定,如var app = angular.module("starter",["ionic"])
app.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$on('$ionicView.beforeEnter', function() {
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });

            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

没有供给隐藏的页面须要标签ion-view增加表明式hide-tabs=”false”:
<ion-view view-title="更多" hide-tabs="false"> <ion-content class="padding"> 更多 </ion-content></ion-view>

在有tabs的体系里,进入子层级时,尾巴部分导航还直接留存,自个儿是要让他只在首页多少个分界面存在,别的的隐蔽,在此地运用了angularjs的命令,要做到这几个手续分为三步:

今昔心得下效果啊! 
别的,假诺要把职能搞得美观点,未有何延迟现象,须求转移ionic.css文件,退换他必要用scss,那么些剧情前边也是有介绍,改造地点如下:

一 尾巴部分Tabbar的藏身在动用ionic开拓项目标时候,难免会用到底层切换菜单,那么在ionic导航控器中,进入到二级页面,往往我们无需展示尾巴部分菜单,那么我们改什么在ionic的导航调节个中隐藏尾部菜单呢?那么笔者接下来就为大家疏解一下,其实只需求三步就能够做到了。
1.在标签ion-tabs中增加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}” 源码如下:
<ion-tabs class="tabs-icon-top tabs-positive tabs-stable" ng-class="{'tabs-item-hide':$root.hideTabs}"> <ion-tab title="主页" icon="ion-ios-home-outline" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view > </ion-tab> <ion-tab title="商品" icon="ion-social-github-outline" href="#/tab/productList"> <ion-nav-view name="productList-tab"></ion-nav-view> </ion-tab> <ion-tab title="购物车" icon="ion-ios-cart-outline" href="#/tab/buycarPage"> <ion-nav-view name="buycarPage-tab"></ion-nav-view> </ion-tab> <ion-tab title="笔者的天猫商城" icon="ion-ios-person-outline" ui-sref="tabs.mytaobao"> <ion-nav-view name="mytaobao-tab"></ion-nav-view> </ion-tab> <ion-tab title="更加多" icon="ion-android-more-horizontal" ui-sref="tabs.more"> <ion-nav-view name="more-tab"></ion-nav-view> </ion-tab></ion-tabs>

你大概感兴趣的小说:

  • ionic隐藏tabs的方法
  • Ionic暗中认可的Tabs模板使用实例
  • ionic组件ion-tabs选项卡切换效果实例
  • ionic2 tabs使用 Modal底部tab弹出框
//这是官网模板中的文件
<ion-view hide-tabs="true" view-title="{{chat.name}}">

  <ion-content class="padding">

    <img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
    <p>
      {{chat.lastText}}
    </p>
  </ion-content>
</ion-view>

2015年12月2日
底部tabbar的隐藏

//app已经在其他文件中指定,如var app = angular.module("starter",["ionic"]) 
app.directive('hideTabs', function($rootScope) { 
return { 
restrict: 'A', 
link: function(scope, element, attributes) { 
scope.$on('$ionicView.beforeEnter', function() { 
scope.$watch(attributes.hideTabs, function(value){ 
$rootScope.hideTabs = 'tabs-item-hide'; 
}); 
}); 
scope.$on('$ionicView.beforeLeave', function() { 
scope.$watch(attributes.hideTabs, function(value){ 
$rootScope.hideTabs = 'tabs-item-hide'; 
}); 
scope.$watch('$destroy',function(){ 
$rootScope.hideTabs = false; 
}) 
}); 
} 
}; 
});

上边内容在tabs.scss文件中! 

3.您想要隐藏的分界面标签ion-view加多表达式hide-tabs=”true”,源码如下:
<ion-view view-title="尺码,颜色分类" hide-tabs="true" ng-controller="sizeAndColorStyle"> <ion-nav-bar class="bar-stable"> <ion-nav-back-button class="button-stable"> 重返 </ion-nav-back-button> </ion-nav-bar></ion-view>

在想要隐藏的分界面标签 ion-view增添表明式hide-tabs=”true”,源码如下:

.tabs {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

.tabs-item-hide > .tabs{
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  bottom: -$tabs-height;
  display: flex;
}
//这是官网模板中的文件 
<ion-view hide-tabs="true" view-title="{{chat.name}}"> 
<ion-content class="padding"> 
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px"> 
<p> 
{{chat.lastText}} 
</p> 
</ion-content> 
</ion-view>

2.加多angularjs的通令,源码如下:

上述所述是我给咱们介绍的ionic进入千家万户目录后隐藏尾部导航栏(tabs)的健全化解方案,希望对大家有着帮忙,若是大家有其它疑问请给自家留言,我会及时过来我们的。在此也极度谢谢大家对台本之家网址的扶助!

<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">

//tabs

</ion-tabs>
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:跻身二级目录之后隐藏尾部导航栏,的通盘化解