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的ajax异步请求接收返回json数据实例
Jun 16 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python3中函数参数的四种简单用法
2018/07/09 Python
pandas.cut具体使用总结
2019/06/24 Python
python 公共方法汇总解析
2019/09/16 Python
python实现超级马里奥
2020/03/18 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
大四学生思想汇报
2014/01/13 职场文书
退休感言
2014/01/28 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
教师岗位职责范本
2015/04/02 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
建党伟业观后感
2015/06/01 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书