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.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
JavaScript实现Excel表格效果
2020/02/07 Javascript
Python做智能家居温湿度报警系统
2018/09/25 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
《祁黄羊》教学反思
2014/04/22 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
安全月宣传标语
2014/10/07 职场文书
自查自纠整改报告
2014/11/06 职场文书
企业整改报告范文
2014/11/08 职场文书
大学生助学金感谢信
2015/01/21 职场文书
职称评定个人总结
2015/03/05 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers