ionic隐藏tabs的方法


Posted in Javascript onAugust 29, 2016

本文为大家分享了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上。

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

Javascript 相关文章推荐
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
初识Node.js
Mar 20 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 #Javascript
深入理解React中es6创建组件this的方法
Aug 29 #Javascript
Ionic默认的Tabs模板使用实例
Aug 29 #Javascript
关于Javascript回调函数的一个妙用
Aug 29 #Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 #Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 #Javascript
教你如何在Node.js中使用jQuery
Aug 28 #Javascript
You might like
php动态生成JavaScript代码
2009/03/09 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
jQuery实现tab栏切换效果
2020/12/22 jQuery
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
从0开始的Python学习016异常
2019/04/08 Python
python实现简单井字棋小游戏
2020/03/05 Python
Python定义一个Actor任务
2020/07/29 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
Python3获取cookie常用三种方案
2020/10/05 Python
小学体育教学反思
2014/01/31 职场文书
个性与发展自我评价
2014/02/11 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
保护环境的宣传语
2015/07/13 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
PHP遍历数组的6种方式总结
2021/11/17 PHP
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python