ionic隐藏tabs的方法

 更新时间:2016年08月29日 09:49:31   投稿:lijiao  
这篇文章主要为大家详细介绍了ionic隐藏tabs的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文为大家分享了ionic隐藏tabs的方法,供大家参考,具体内容如下

1.

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

2.
在该控制器下加上.directive:

var module = angular.module('app.directives', []);
module.directive('showTabs', function ($rootScope) {
  return {
    restrict: 'A',
    link: function ($scope, $el) {
      $rootScope.hideTabs = false;
    }
  };
}).directive('hideTabs', function ($rootScope) {
  return {
    restrict: 'A',
    link: function ($scope, $el) {
      $rootScope.hideTabs = true;
    }
  };
}) 

3.
 在html页面中引用hide-tabs

<ion-view title="New Entry Form" hide-tabs>
  <!-- view content -->
</ion-tabs> 

4.

 当页面返回主页面时,需要再次显示tabs,则需要在该控制器中加上(主要是解决android上tabs还是隐藏的问题): 

$scope.$on('$ionicView.enter', function () {
  // 显示 tabs
  $rootScope.hideTabs = false;
}); 

 5. 
我用的是tabs-top,还遇到的一个问题是:<ion-content>的一部分内容会被隐藏;解决办法: 
再次修改directive.js里边的内容,不再使用showTabs: 

.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;
      });
    }
  };
}) 

来个总结吧,相对于tabs用法,如果是在底部的话,上边的那些不会有什么太大的问题。但如果是用在顶部的话,涉及到content,会遇到一点问题。 

其实可以考虑使用ionic上的<ion-slide>来代替<ion-tabs>,不管是与其它页面的滑动效果,还是slide页面的滑动效果都会很大的提升,特别是在android上。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 谈一谈js中的执行环境及作用域

    谈一谈js中的执行环境及作用域

    这篇文章主要和大家一起谈一谈js中的执行环境及作用域,本文依据面试过程中遇到的问题进行探讨,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 取得元素的左和上偏移量的方法

    取得元素的左和上偏移量的方法

    利用offsetParent属性在Dom层次中逐级向上回溯,将每个层次偏移量合计,需要的朋友可以参考下
    2014-09-09
  • js中的数组Array定义与sort方法使用示例

    js中的数组Array定义与sort方法使用示例

    Array定义与sort方法在使用过程中还是比较常见的,下面为大家介绍下Array的定义及sort方法使用示例
    2013-08-08
  • 微信小程序如何播放腾讯视频的实现

    微信小程序如何播放腾讯视频的实现

    这篇文章主要介绍了微信小程序如何播放腾讯视频的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • javascript中一些奇葩的日期换算方法总结

    javascript中一些奇葩的日期换算方法总结

    这篇文章主要给大家总结介绍了关于javascript中的一些奇葩的日期换算方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • JS浅拷贝和深拷贝原理与实现方法分析

    JS浅拷贝和深拷贝原理与实现方法分析

    这篇文章主要介绍了JS浅拷贝和深拷贝原理与实现方法,结合实例形式分析了javascript浅拷贝及深拷贝相关概念、原理、实现方法与操作注意事项,需要的朋友可以参考下
    2019-02-02
  • webpack该如何打包(打包流程)

    webpack该如何打包(打包流程)

    这篇文章主要介绍了webpack该如何打包及打包流程,本文通过图文示例相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • cropperjs实现裁剪图片功能

    cropperjs实现裁剪图片功能

    这篇文章主要为大家详细介绍了cropperjs实现裁剪图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • JsDom 编程小结

    JsDom 编程小结

    JsDom编程小结,需要进行dom操作的朋友可以参考下。
    2011-08-08
  • JS实现网页Div层Clone拖拽效果

    JS实现网页Div层Clone拖拽效果

    这篇文章主要介绍了JS实现网页Div层Clone拖拽效果,涉及JavaScript响应鼠标事件动态改变页面元素位置属性及层级属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论