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中children()与find()的区别介绍
Apr 26 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
json数据格式常见操作示例
Jun 13 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
canvas多重阴影发光效果实现
Apr 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
php获取远程文件大小
2015/10/20 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python File(文件) 方法整理
2019/02/18 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
Collection和Collections的区别
2016/05/02 面试题
家长会学生家长演讲稿
2013/12/29 职场文书
烹饪自我鉴定
2014/03/01 职场文书
小学运动会演讲稿
2014/08/25 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js
字节飞书面试promise.all实现示例
2022/06/16 Javascript